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区 1 享用 JavaScript 拦 建 示 志 效 呆 


这 个 模块 的 HTML 代码 如 下 所 示 。 


2. <head> 

3. <LINKmedia=screen href="css/lanrentuku.css" type=text/css 
Pel=stylesheet> 

4. </head> 

5. <body style="text-align:center"> 

6. <SCRIPT src="js/js.js" type=text/JavaSscript></SCRIPT> 

7. <SCRIPT type=text/Javascript> 

8. TencentArticl.onload(); 

SEE<XSCREPT> 

10. <DIV class="mod-left bottom-Article-QQ sildPic-Article-QQ"> 

11. <DIV class=hd> 

12. <H2> 热 点 推荐 </H2> 

13. <DIV class=sildPicBar id=sildPicBar><SPAN class=pre></SPAN> 

14. <UL id=dot></UL><SPAN class=next></SPAN></DIV></DIV> 

15. <DIV class=bd> 

16. <DIV class=cnt-wrap id=cnt-wrap> 

17. <DIV class=cnt id=cnt> 

Lz 

ns "images/30407468.jpg"> </LI> 

0 "images/30407482.jpg"> </LI> 

2 "images/30407470.jpg"> </LI> 

22. <LI><IMG src="images/30407474.jpg"></LI> 

23. <LI><IMG src="images/30339984.jpg"></LI> 

24. <LI><IMG src="images/30339561.jpg"></LI> 

25. <LI><IMG src="images/30339719.jpg"></LI> 

26. <LI><IMG src="images/30339381.jpg"></LI> 

27. <LI><IMG src="images/30354078.jpg"></LI> 

28. <LI><IMG src="images/30354433.jpg"></LI> 

29. <LI><IMG src="images/30353751.jpg"></LI> 

30. <LI><IMG src="images/30354586.jpg"></LI> 

31. </UL> 

32. </DIV> 

33. </DIV> 

34. </DIV> 

35. </DIV> 

36. </body> 

37. </html> 

这 部 分 的 代码 比较 简单 ， 第 6 行 通过 script 标 签 引 入 jsjs 脚 本 文件 。 第 18 到 第 31 行 通过 ul 和 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 


1 的 方式 ， 引 入 多 张 图 片 。 


而 第 8 行 通过 TencentArticl.onload(); 这 句 代 码 来 执行 相应 的 JavaScript 代 码 ， 使 其 完成 动态 


效果 。 
下 


1. 


可 | 


看 一 个 JavaScript 部 分 的 代码 。 


Var TencntART=new Object (); 


if(parseInt (this.$ (this.tabsilder) .style.left)>-156*parseInt (this. 


Now*4)) 
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3. { 

4 this.moveR(); 
5. 3} 

6: else 

8 this .moveL () 
9 


-eh 
10. for (var i=0;i<Math.ceil (this.Count ()/4);i++) 
1 le | 
12. if(i==this.Now) 
2 站 
La this.getEles (this.tabId, "1i") [this.Now] .className="select"; 
se 
FE6= olse 
1 
18. this.getEles (this.tabId, "1i") [i] .className=""; 
ee 
ZO 
Vs 
22. moveR:function (setp) 
pe S| 


24. var _curLeft=parseInt (this.$ (this.tabsilder) .style.1left); 

25. var distance=50; 

26. if( curLeft>-156*parseInt (this.Now*4)) 

Ze 

2 this.$ (this.tabsilder) .style.left=( curLeft- distance)+26+"px"; 
2 

05 

31. moveL:function (setp) 

< pA | 

33. var _curLeft=parseInt (this.$ (this.tabsilder) .style.1left); 

34. var _distance=50; 

35. if( curLeft<-156*parseInt (this.Now*4)) 

S60 

和 本 this.$(this.tabSilder) .style.left=(_ curLeft+ distance)-26+"px"; 
38-° 

39-0 


这 部 分 的 JavaScript 代 码 相当 复杂 ， 读 者 可 以 通过 阅读 光盘 里 的 代码 来 仔细 分 析 ， 而 且 还 
可 以 通过 改编 图 片 或 文字 ， 把 代码 应 用 到 自己 的 网 页 上 。 

代码 第 1 行 定 义 一 个 TencntARIT 对 象 。 而 第 2 到 第 9 行 的 i 厂 else 语句 ， 判 断 用 户 是 让 
左 还 是 向 右 的 按钮 ， 由 此 调用 对 应 的 函数 。 

接 下 来 看 一 下 第 22 行 的 moveR 函 数 ， 它 通过 第 28 行 的 style.left， 来 实现 图 片 向 左 移 动 的 效 
果 ， 第 31 行 中 的 moveL 函 数 的 作用 也 是 这 样 ， 只 不 过 这 两 个 的 参数 不 同 ， 一 个 是 +26， 一 个 


是 -26。 


志 


了 向 
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如 果 一 个 页 面包 含 的 要 素 比较 多 ， 那 就 需要 设计 一 些 菜 


第 11 章 ”用 JavaScript 搭 建 动 态 效 果 


11:3 ”针对 菜单 的 效果 


来 实现 导航 的 效果 。 使 用 CSS 


可 以 实现 含有 “鼠标 悬浮 效果 ”的 静态 菜单 ， 但 这 个 效果 已 不 足以 满足 当前 的 页 面 美观 需 
求 ， 本 节 将 通过 一 些 例子 ， 向 大 家 详细 说 明 使 用 JavaScript 开 发 菜单 效果 的 方法 。 


丰 民 蚤 鸣 用 JavaScript 实 现 页 签 效果 


在 Windows 系 统 中 ， 经 常 能 看 到 页 签 的 效果 。 在 HIML 页 面 中 ， 也 能 通过 JavaScript 的 代 
码 ， 实 现 这 类 效果 。 


范例 11-3: 【光盘 位 置 】\sample\chap1 八 页 签 菜单 \index.htm 


范例 的 效果 如 图 11-3 所 示 ， 展 示 一 个 页 面 中 的 通过 页 签 分 页 的 效果 ， 单 击 各 页 签 标题 ， 
可 以 切换 页 面 的 内 容 。 


图 11-3 ”页 签 效果 


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 面 板式 菜单 </title> 
<body> 
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=300 border=0 
class="css3"> 
<TBODY> 
<TRalign=middle height=20> 
<TD class=sec2 onclick=secBoard (0) width="10%"> 关 于 本 站 </TD> 
<TD class=secl onclick=secBoard (1) width="10%"> 返 回首 页 </TD> 
<TD class=secl onclick=secBoard (2) width="10%"> 返 回 目录 </TD> 
<TD class=secl onclick=secBoard (3) width="10%"> 赏 心 悦 目 </TD> 


> <TR> 
- </TBODY> 
-</TABLE> 
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16. <TABLE class=main tab id=mainTable height=180 cellSpacing=0 

下 cellPadding=0 width=300 border=0> 

18. <!-- 关 于 TBODY 标 记 --> 

19. <TBODY style="DISPLAY: block"> 

205 <TR> 

2 <TD vAlign=top align=middle><BR><BR> 

22> <TABLE cellSpacing=0 cellPadding=0 width=291 border=0> 

235 <TBODY> 

之 <TR> 

5 <! 一 关于 本 站 里 的 文字 --> 

2Z65 <TD class="css3"> 本 网 站 是 为 广大 的 网 页 设计 者 服务 的 网 站 。 网 站 收集 了 大 量 的 网 页 素 
材 、JSP 编 程 、 图 形 特效 、JavasT 特 效 和 网 页 制作 工具 的 使 用 方法 。 另外 ， 网 站 还 收集 
了 一 些 精美 的 图 片 和 音乐 供 你 欣赏 <font size="2"><font color="#000000">。 
</font></font><BR> <BR> 


27. </TD> 
28. </TR> 
2 </TBODY> 


30. </TABLE> 
31. </TD></TR></TBODY><!-- 关 于 cel1s 集 合 --> 


2 <TBODY style="DISPLAY: none"> 
加 号 <TR> 
3 <TD vAlign=top align=middle><BR><BR> 


< 上 六 <TABLE cellSpacing=0 cellPadding=0 width=291 border=0> 
36. ”<! 一 返回 首页 部 分 的 文字 --> 


Sie <TBODY> 

< ;本 <TR> 

3 <TDelass="c9s3"> 

40. <p> 去 首页 看 看 微风 吹拂 ， 竹 叶 轻 摇 的 特效 。</P> 
41. </TD> 

42. </TR> 

区 请 </TBODY> 


44. </TRBLE> 
45. </TD></TR></TBODY><!-- 关 于 tBodies 集 合 --> 
46. <TBODY style="DISPLAY: none"> 


47. <TR> 

48. <TD vAlign=top align=middle><BR><BR> 

49. <TABLE cellSpacing=0 cellPadding=0 width=291 border=0> 

5 OR <! 一 返回 目录 部 分 的 文字 --> 

Ss <TBODY> 

SR <TR> 

与 3 <TDclass="c333"> 

54. <p> 本 页 从 上 千 个 网 页 特效 中 精 选 了 300 多 个 实用 的 网 页 特效 。 对 每 个 特效 我 们 都 做 了 严 
格 的 测试 ， 相 信 一 定 能 对 你 的 网 页 制作 起 到 一 定 作 用 。 

SH </p> 

356° </TD> 

ST </TR> 

SB </TBODY> 

4 上 属 </TABLE> 


€0. </TD></TR></TBODY> 
61. <!-- 关 于 display 属 性 --> 
62. <TBODY style="DISPLAY: none™"> 
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03 <TR> 

64. <TD vAlign=top align=middle><BR><BR> 

65. <table cellspacing=0 cellpadding=0 width=291 border=0> 

66. <! 一 赏心悦目 部 分 的 文字 --> 

Ts <tbody> 

68. <tr> 

69. <td class="css3"> 你 浏览 本 网 站 辛苦 了 ， 休 息 一 会 ， 去 到 本 站 的 赏心悦目 找 个 美 
眉 让 她 看 看 你 。<br> 

70. </td> 

re </Er> 

2 </tbody> 

735 </table> 

74. </TD> 

75. </TR></TBODY></TABLE> 

76. </body> 

77. </html> 


过 诸如 onclick=secBoard(0) 的 代码 ， 指 定 了 鼠标 单 击 页 签 后 的 动态 效果 。 


在 上 面 代码 中 ， 第 8 到 第 13 行 ， 在 tr 中 定义 了 4 个 页 签 的 标题 部 分 ， 而 在 这 些 页 签 中 ， 


在 第 26 和 第 27 行 ， 给 出 了 “关于 本 站 ”部 分 页 签 的 文字 。 从 第 39 到 41 行 ， 给 出 了 “返回 


首页 ”部 分 页 签 的 文字 。 第 54 和 第 55 行 ， 给 出 了 “返回 目录 ”部 分 的 文字 。 第 69 和 70 行 ， 


出 了 “赏心悦目 ”的 文字 。 
下 面 我 们 来 看 一 下 JavaScript 部 分 的 代码 ， 代 码 只 定义 了 secBoard 方 法 。 


<SCRIPT language=JavaScript> 

function secBoard (n) 

{ 

for (i=0;i<secTable.cells.length;i++) 
secTable.cells[i] .className="secl"; 

secTable.cells[n] .className="sec2"; 

for (i=0;i<mainTable.tBodies.1length;i++) 
mainTable.tBodies[i].style.display="none"; 

. mainTable.tBodies[n] .style.display="block"; 

LOet 

Le </SCRIPE. 


这 部 分 的 JavaScript 代 码 包 含 在 第 1 和 第 11 行 的 script 块 里 ， 在 secBoard 方 法 


oawm 必 sw 


hb 


通 


给 


第 4 行 的 for 循 环 ， 遍 历 四 个 页 签 ， 判 断 一 下 哪个 页 签 被单 击 ， 随 后 在 第 7 行 的 代码 for 循 环 ， 
通过 设置 mainTable.tBodies[i].style.display="none": 的 方法 ， 把 非 选 中 部 分 的 页 签 效 果 设 置 成 


none， 最 后 在 第 9 行 里 ， 设 置 由 参数 n 指 定 的 页 签 显 示 效果 。 


用 JavaScript 实 现下 拉 式 菜单 


在 一 个 网 页 中 ， 如 果 需 要 导航 的 部 分 比较 多 ， 那 么 就 可 能 会 用 到 二 级 菜单 ， 
通过 JavaScript 实 现 了 一 个 二 级 菜单 的 效果 。 


范例 11-4: 【光盘 位 置 】\sample\chap1 八 代码 \ 下 拉 式 菜单 \index.htm 


下 面 的 范例 


这 个 范例 实现 了 图 11-4 所 示 的 二 级 菜单 的 效果 ， 当 鼠标 移动 到 菜单 项 上 时 ， 


二 级 菜 六 
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动 出 现 。 


图 11-4 二 级 菜单 部 分 的 效果 


这 个 范例 直接 把 代码 写 到 JavaScript 部 分 ， 代 码 有 些 复 杂 ， 下 面 按 步骤 分 析 一 下 。 
第 一 步 ， 需 要 在 JavaScript 里 定义 显示 内 容 ， 并 通过 mwritetodocument 方 法 实现 菜单 业务 
的 逻辑 动作 。 


1. mpmenul=newmMenu (' 网 站 首页 '，'/ "self' 9) 

2. mpmenul .addItem (new mMenuItem(' 用 户 注册 ', '/register.asp','self',false,' 
Fe 

3. mpmenul.addItem(new mMenuItem(' 用 户 登录 ', ' /login.asp','self',false, ' 用 户 


登录 nul1 )); 
4. mpmenu2=new mMenu (' 软 件 下 载 '，'/SoftDown/''self' 7; 
5. mpmenu2 .addItem(new mMenuItem(' 系统 程序 ',' /softdown/index. 
asp?CateID=1’”, "self', false, "系统 程序 ", null ))s 
6. mpmenu2.addItem (new mMenuItem(' 网 络 工具 '，,'/softdown/index. 
asp?CateID=2', 'self', false, ' 网 络 工具 ' ,null,'','','','')); 
7. mpmenu2 .addItem(newmMenuItem(" 下 载 排行 ', ' /SoftDown/Index. asp?order=AllH 
itsgupdown=desc','self', false, ' 软 件 下 载 排 行 榜 ' ,nul11, :0 ) 7 


8. mpmenu3=new mMenu (' 软 件 学 院 '，'/SoftSschoo1/''self' 7 

9. mpmenu3 .addItem (new mMenuItem(" 软件 上 望 '，' /Softschool/Index. 
Rsp?CateID=1', "self',false,' 软 件 晾 望 ' ,nul1， 1) 

10. mpmenu4=new mMenu ('Web 开发 '，'/Develop/' self) 

11. mpmenu4 .addItem (new mMenuItem(' 网 页 设计 ',，,'/Develop/Index. 
Asp?CateID=1', "self' false, 网 页 设计 "nualI 7 7))7 

12. mpmenu4 .addItem (new mMenuItem(' .Net 专 栏 ', '/Develop/Index. 
Asp?CateID=10', 'self', false, ' .Net 专 栏 ',null, 0)) 7 

13. mpmenu4 .addItem (new mMenuItem(' ASP 学 院 '，,'/Develop/Index. 
Asp?CateID=2', 'self', false, "RSP 学 院 ' ,nul1， 7))7 

14. mwritetodocument() 


人 mMenu 是 对 象 ， 是 容纳 菜单 的 容器 ， 而 addItem 则 能 在 这 个 容器 里 放置 多 
， 通 过 mwritetodocument 方 法 ， 把 菜单 项 写 到 页 面 上 ， 这 部 分 的 代码 非常 复杂 ， 
所 以 这 里 就 不 再 重点 讲述 ， 它 通过 如 下 代码 来 引入 菜单 ， 并 为 菜单 定义 许多 CSS 效 果 。 

1. var stringx=”<div id="mposflag" style="position:absolute;"></div> 

2. <table id=mmenutable border=0 cellpadding=3 cellspacing=2 


width=’ +mmenuwidth+’ height=’ +mmenuheight+’ bgcolor=’” +mmenucolor+ 
‘onselectstart="event .returnValue=false"’” + 


才 


漳 “ style="filter:Alpha (Opacity=80) ;cursor:’ +mcursor+’ ;’ +mfonts+ 
5 “border-left: ‘+mwb+’ px solid “+mmenuoutbordercolor+”7 ”十 

6. “border-right: ‘+mwb+’ pxsolid ‘+mmenuinbordercolor+’” ; “+ 

5 放 ‘border-top: ‘+mwb+’ px solid “+mmenuoutbordercolor+”; “+ 


226 


第 11 京 “用 JevaScript 湛 建 动态 效果 


SE 


‘border-bottom: ‘+mwb+’” px solid ‘+mmenuinbordercolor+’” ; 
padding:0px"> 
<tr>” 


第 三 步 ， 定 义 鼠 标 动作 。 当 鼠标 移动 到 一 级 菜单 上 时 ， 会 自动 出 现 二 级 菜单 ， 这 部 分 代 
码 放 在 mmenutiem_over 方 法 中 实现 的 ， 代 码 如 下 所 示 ， 其 中 主要 是 通过 第 6 到 第 15 行 的 for 循 
环 ， 判 断 哪个 菜单 被 选中 ， 随 后 选择 性 地 出 现 菜单 文字 。 


1 
2 
3 


function mmenuitem over (menuid, item, x,j,i)t{ 
toel = getReal (window.event .toElement, "className", "coolButton"); 
fromel = getReal (window.event .fromElement, "className", 
"coolButton"); 
if (toel == fromel) return; 
srcel =getReal (window.event .srcElement, "className", "coolButton"); 
for (nummenu=1;nummenu<=mnumberofsub;nummenu++) 
| 
var thesub=document .all[ ‘msubmenudiv’ +nummenu] 
if(! (menuid==thesub||menuid.style.tag>=thesub.style.tag)) 
msubmenuhide (thesub); 
mnochange (document .all[ ‘mp’” +nummenu]); 
document .all["mitem"+nummenu] .style.color=mfontcolor; 
} 
} 
if(item)document .all["mitem"+item] .style.color=mmenuovercolor; 
if (misdown||item){ 
mtoin(srcel); 
} 
elsef{ 
mtoout (srcel); 
} 


if (x==-1) 
mthestatus=eval ("msub"+j) .items [i] . statustxt7 
a 


mthestatus=mmenus [x] .items [i] .statustxt; 
if(mthestatus!="") 
| 
musestatus=true; 
window.status=mthestatus; 


} 
clearTimeout (mpopTimer); 


这 部 分 实现 下 拉 式 菜单 部 分 的 代码 非常 复杂 ， 里 面 牵 涉 到 很 多 JavaScript 语 法 ， 不 过 值得 庆 
幸 的 是 ， 我 们 可 以 通过 修改 mMenu 里 的 addItem 参 数 ， 即 通过 修改 二 级 菜单 的 文字 和 对 应 的 
超 链 使 用 这 个 二 级 菜单 。 


此 外 ， 对 于 网 络 上 一 些 比较 复杂 的 JavaScript 效 果 ， 我 们 可 以 通过 类 似 的 方法 进行 改写 ， 


并 运用 到 自己 的 网 页 上 。 
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用 JavaScript 实 现 滑轮 式 菜单 效果 


在 一 些 网 站 中 ， 经 常 看 到 滑轮 式 菜单 的 效果 ， 如 图 11-5 所 示 ， 当 鼠标 移动 到 “图 书 类 ” 
或 者 是 “玩具 ”菜单 上 ， 会 出 现下 方 文字 变换 的 效果 。 


笔记 本 电脑 


图 11-5 ”滑轮 式 菜单 的 效果 


这 种 效果 的 HTML 代 码 如 下 所 示 。 

1. <HTML><HEAD><TITLE> 绝 对 经 典 的 滑轮 新 闻 显 示 (JavaScript+css)</TITLE> 
2. <METAhttp-equiv=Content-Type content="text/html; charset=gb2312"> 
3. </HEAD> 

4. <BODY> 

5. <DIV id=cntR> 

6. <DIV id=NewsTop> 

Bs <DIV id=NewsTop tit> 

8 <p class=topTid> 宝 物 展 示 </p> 

9. <P class=topC0> 电 子 类 </P> 

10. <P class=topC0> 图 书 类 </P> 

11. <P class=topC0> 玩 具 </P> 

L200 ALDIV> 

13. <DIV id=NewsTop cnt><SPAN title="Don't delete me"></SPAN> 

LE <SPAN> 


15. ”数码 相机 <BR> 
16. ”PSP 机 <BR> 

17. ”手机 <BR> 

18. ”笔记 本 电脑 <BR> 


19. </SPAN> 
20E <SPAN> 
2 十 万 个 为 什么 </A><BR> 


2 地 球 究竟 有 多 大 </A><BR> 
人 3 人 类 起 源 <BR> 
24. 电脑 的 功能 <BR> 


25. </SPAN> 
D6 <SPAN> 
D7 迪 加 奥 特 曼 <BR> 


28. ”变形 金刚 <BR> 
29. 樱桃 小 丸子 <BR> 
30. ”叮当 猫 <BR> 
31. </SPAN> 

3 </DIV> 

33. </BODY> 

34. </HTML> 
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这 部 分 的 代码 相对 简单 ， 它 使 用 3 个 DIV 来 展示 “电子 类 ”、“ 图 书 类 ”和 “玩具 ”3 部 
分 的 文字 。 而 滑轮 式 菜单 的 效果 是 通过 如 下 的 JavaScript 代 码 实现 的 。 


.1} 


. // 鼠 标 切 换 的 方法 
. function changeNav (v) 
| 


.1} 


. VarTags=document .getElementById( ‘NewsTop tit’” ). 


getElementsByTagName ( ‘p’” ); 


- varTagsCnt=document .getElementById( ‘NewsTop cnt’” ). 


getElementsByTagName ( ‘span’” ); 


. varlen=Tags.1length; 


. var flag=1; // 修 改 默 认 值 


for (i=1;i<len;i++){ 
Tags [il .value=i; 
Tags [i] .onmouseover=function () 
{ 
changeNav (this.value) 


7 


TagsCnt [i] .className='undis'7 


Tags [flag] .className='topCl1'7 
TagsCnt [flag] .className='dis'; 


Tags [flag] .className='topC0'7 
TagsCnt [flag] .className='undis'; 
flag=v; 
Tags[v] .className='topC1'7 
TagsCnt [v] .className='dis'7 


其 中 ， 在 第 5 行 的 for 循 环 里 ， 为 每 个 分 类 块 设置 一 些 属性 。 在 第 7 到 第 10 行 里 ， 指 明了 每 
个 分 类 的 onmouseover 属 性 为 changeNav， 也 就 是 说 ， 如 果 鼠 标 移动 到 分 类 上 ， 会 自动 调用 这 
个 方法 。 而 在 第 16 行 的 changeNav 方 法 中 ， 实 现 了 切换 的 效果 。 


11.4 针对 文字 的 效果 


在 网 页 中 ， 如 果 单 纯 使 用 静态 的 文字 效果 ， 整 个 页 面 显得 呆板 而 无 吸引 力 ， 我 们 可 以 通 
过 JavaScript 设 计 一 些 针对 文字 的 动态 效果 ， 从 而 让 网 页 更 加 美观 。 


人 ES 文字 的 打字 效果 


A 


的 打字 效果 就 是 事先 设计 好 要 显示 的 文字 ， 然 后 再 通过 JS 脚本 逐一 显示 出 文字 来 。 


H 


就 是 一 个 文字 闪 动 的 范例 ， 其 效果 如 图 11-6 所 示 。 
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人 EDV+CSSmmrnsnn 国宝 宝宝 证 证 计 和 和 


范例 11-5: 【光盘 位 置 】\sample\chap1 人 文字 的 打字 效果 \index.html 
在 这 个 范例 中 ， 需 要 实现 的 效果 如 下 。 

外 实现 文字 的 从 上 到 下 波浪 式 的 闪 动 。 

四 实现 鼠标 放 到 文字 上 时 ， 所 在 行 的 文字 变 成 红色 。 


最 新 内 容 : 开心 就 好 最 新 内 容 : ww laisinjiuha 


网 


图 11-6 文字 的 打字 效果 


这 个 范例 的 HTML 代 码 如 下 所 示 。 


1. <html> 

2. <head> 

3. <title> 打 字 效 果 的 文字 </title> 

4. <metahttp-equiv="Content-Type" content="text/html; charset=gb2312"> 
5. <styletype="text/css"> 

6. body{ 

3 font-size:14px; 

8. font-weight:bold; 

> 

10. </style> 

11. </head> 

12. <body> 

13. 最 新 内 容 : 

14. <a id="HotNews" href="#" target=" blank"></a> 
15. </body> 

16. </html> 


在 上 面 代码 的 第 6 到 第 9 行 中 ， 设 置 了 整体 的 CSS 样 式 ， 比 如 设置 字体 大 小 为 14 个 像素 ， 
设置 字体 为 粗 体 。 
第 14 行 为 a 标 签 定义 了 ID 属性 ， 在 JavaScript 代 码 中 通过 这 个 ID 来 取得 所 要 显示 文字 的 位 


置 。 


在 这 个 范例 中 ， 所 有 的 效果 都 是 通过 JavaScript 代 码 来 完成 的 ， 这 些 脚本 代码 很 重要 ， 如 
下 所 示 。 


<SCRIPT LANGUAGE="JavaScript"> 

<1== 

var NewsTime = 2000; // 每 条 文字 的 停留 时 间 

Var TextTime = 50; // 标 题 文 字 出 现 等 待 时 间 ， 越 小 越 快 
var newsi=0; 

var txti=0; 

var txttimer; 


oaawa 必 wm 


Var newstimer; 

9. var newstitle =newRrray() ;// 标 题 

10. var newshref = new Array (); // 链 接 ， 在 此 我 们 引用 自身 
11. newstitle[0] = "开心 就 好 "; 

12. newshref [0] = "#"; 

13. newstitle[1] = "www.kaixinjiuhao.com"; 
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和 了 二 。 用 ,JavaScript 找 于 动 赤水 果 


14. 
1 
16。 
ye 
LO 
9 
20 . 
2 
2> 
3 
24. 
”局 
26. 
之 
28. 
29- 
30 
3 
32. 
3 
34. 
35- 
36- 
31. 
38. 
39. 
40. 
41. 
42. 
43. 


44. 
45. 
46. 
47. 
48. 


49 


newshref [1] = "#"; 
newstitle[2] = "时 间 就 是 金钱 "; 


newshref [2] = "#"; 


newstitle[3] = "欢迎 再 次 光临 "; 
newshref [3] = "#"; 
function shownew () 
中 
varendstr=" " 
hwnewstr =newstitle[newsi]; 
newslink =newshref [newsi]; 
if (txti== (hwnewstr.length-1)) 
{ 
endstr=""; 
} 
if (txti>=hwnewstr.1length) 
{ 
clearInterval (txttimer); 
clearInterval (newstimer); 
Dewsi++7 
if (newsi>=newstitle.1length) 
{ 
newsi=0 
} 
newstimer = setInterval ("shownew()",NewsTime); 
txti=0; 
return; 
} 
clearInterval (txttimer); 
document .getElementById ("HotNews") .href=newslink; 
document .getElementById ("HotNews") .innerHTML = hwnewstr. 
substring(0,txti+1)+endstr; 
txti++; 
txttimer = setInterval ("shownew()", TextTime); 
| 
Shownew() 7 
et 
.</SCRIPT> 


上 面 代码 主要 通过 调用 函数 shownew( 来 完成 文字 的 显示 。 


从 第 3 行 到 第 18 行 定义 了 脚本 所 需要 用 到 的 变量 ， 包 括 所 要 显示 的 文字 及 其 所 对 应 的 链 
接 。 从 第 19 行 到 第 40 行 ， 通 过 变量 及 条 件 来 找到 所 需要 显示 出 来 的 文字 ， 通 过 txttimer = setIn 
terval("shownew()",TextTime); 来 获得 需要 输出 的 文字 内 容 ， 并 在 第 47 行 通过 shownew() 方 法 循 


环 调用 ， 


显示 所 设 定好 的 文字 。 


下 区 及 带 提示 文字 的 JavaScript 特 效 


在 页 面 中 ， 经 常会 看 到 这 样 的 效果 : 当 鼠 标 移动 到 文字 上 的 时 候 ， 自 动 出 现 提示 信息 ， 
效果 如 图 11-7 所 示 。 
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链接 提示 效果 : 将 鼠标 放 在 我 上 面 就 能 看 到 好 东西 了 


| 


看 到 效果 了 吧 ， 多 神奇 啊 


图 11-7 ” 带 提示 文字 的 效果 


这 种 效果 的 HIML 代 码 如 下 所 示 。 


<html> 

<head> 

<title>title 及 alt 提 示 特 效 </title> 

<style type="text/css"> 

body{ 
font-size:12px; 
color:#000000 

1 

J 

10. font-size:12px; 

11. color:#000000 

2 

TS a 

14. font-size:12px; 

15. color:#000000 

L660 

17. </style> 

18. </head> 

19. <body> 

20. 链接 提示 效果 : 

21. <ahref="#" target=" blank" title=" 看 到 效果 了 吧 ， 多 神奇 啊 "> 

22. 将 鼠标 放 在 我 上 面 就 能 看 到 好 东西 了 

23. </a> 

24. </body> 

25. </html> 


在 上 面 代码 中 ， 第 11 行 设置 了 文字 效果 ， 并 通过 a 标签 的 title， 设 置 了 鼠标 移动 上 去 后 的 
文字 提示 效果 。 在 一 般 情况 下 ， 如 果 在 a 标签 的 title 属 性 里 定义 文字 ， 那 么 鼠标 移动 上 去 显示 
的 内 容 仅 仅 是 文字 ， 而 不 会 有 其 他 内 容 。 这 里 通过 JavaScript 代 码 ， 来 展示 的 提示 效果 可 以 有 
其 他 内 容 。 这 部 分 的 JavaScript 代 码 比较 复杂 ， 我 们 分 步 说 明 。 

第 一 步 ， 通 过 如 下 代码 ， 设 置 弹 出 窗口 的 位 置 。 

// 弹出 窗口 位 于 鼠标 左 侧 或 者 右 侧 的 距离 ，3-12 合适 
var pltsoffsetX=127 
// 弹出 窗口 位 于 鼠标 下 方 的 距离 ，3-12 合适 


var pltsoffsetY=15; 
var pltsTitle=""; 


第 二 步 ， 通 过 如 下 代码 ， 设 置 当 鼠 标 移动 上 去 后 的 动作 ， 当 鼠标 移动 上 去 后 ， 会 调 上 
moveToMouseLoc 方 法 。 


oOoODre 


SF 
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第 11 京 “用 JevaScript 湛 建 动态 效果 


1. functionpltsinits() 

2 

3. document .onmouseover=plts; 

4. document .onmousemove =moveToMouseLoc; 
5. 1} 


第 三 步 ， 通 过 moveToMouseLoc 方 法 ， 设 置 弹出 文字 。 


1. function moveToMouseLoc () 


| 
3. if(pltsTipLayer.innerHTML==” ”) 
4. return true; 


5. varMouseX=event .x; 

6. VarMouseY=event.y; 

7. varpopHeight=pltsTipLayer.clientHeight; 

8. varpopWidth=pltsTipLayer.clientWwidth; 

9. if(MouseY+pltsoffsetY+popHeight>document .body.clientHeight) 
主人 0 如 本 

11. popTopAdjust=-popHeight-pltsoffsetY*1.5; 

12. pltsPoptop.style.display="none"; 

13. pltsPopbot.style.display=""; 


a 
os GLse 
日 -| 


17. popTopAdjust=0; 
18. pltsPoptop.style.display=""; 
19. pltsPopbot.style.display="none"; 


ZO | 
21. if (MouseX+pltsoffsetX+popWidth>document .body.clientWidth) 
2Z25 


23. popLeftAdjust=-popWidth-pltsoffsetX*2; 
24. topleft.style.display="none"; 

25. botleft.style.display="none"; 

26. topright.style.display=""; 

27. botright.style.display=""; 


4 | 
29. "else 
SR 


31. popLeftAdjust=0; 

32. topleft.style.display=""; 

33. botleft.style.display=""; 

34. topright.style.display="none™"; 

35. botright.style.display="none"; 

365 | 

37. pltsTipLayer.style.left=MouseX+pltsoffsetX+document .body. 
scrollLeft+popLeftAdjust; 

38. pltsTipLayer.style.top=MouseY+pltsoffsetY+document .body. 
scrollTop+popTopAdjust; 

39. returntries; 

40. } 
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QQ、 | 精通 DIV+CSS emit 布局 


在 上 面 代码 的 第 46 行 之 前 ， 都 是 定义 弹出 文字 的 CSS 样 式 ， 而 在 第 47 和 第 49 行 确定 弹出 
位 置 ， 由 此 实现 动态 的 JavaScript 效 果 。 


11.5 上 机 题 


(1) 使 用 JavaScript 完 成 两 组 图 片 切换 ， 要 求 如 下 。 
外 页 面 显 示 时 ， 显 示 第 一 组 图 片 ， 如 图 11-8 所 示 。 


下 才 0 桥 J] 


图 11-8 上 机 题 1 单 击 前 显示 的 图 片 


怎么 样 ? 


由 


= 


@ 第 一 次 单 击 按钮 时 ， 第 一 组 图 片 变 淡 逐 渐 消 失 ， 第 二 组 图 片 显示 如 图 11-9 所 示 。 


WN 


[二 


字 也 会 跟着 变 哟 | 


图 11-9 上 机 题 1 单 击 后 显示 图 片 


加 以 后 每 点 一 次 按钮 ， 图 片 就 会 切换 一 次 。 
(2) 使 用 JavaScript 完 成 图 片 的 模糊 切换 效果 ， 要 求 如 下 。 
外 当 页 面 显示 时 ， 图 片 会 从 模糊 到 清晰 显示 出 来 ， 如 图 11-10 所 示 。 


会 由 模糊 到 清晰 
逐渐 显示 出 来 


图 11-10 上 机 题 2 第 一 张 图 片 


234 


第 11 章 ”用 JavaScript 搭 建 动态 效果 


@ 然 后 经 过 4 秒 时 间 ， 上 一 张 图 片 从 模糊 到 消失 ， 下 一 张 图 片 再 由 模糊 到 清晰 显示 出 
来 。 以 此 类 推 ， 后 面 的 图 片 也 是 同样 的 效果 ， 如 图 11-11 所 示 。 


第 二 张 图 片 与 第 一 张 同 
样 的 方式 显示 及 退出 


图 11-11 上 机 题 2 第 二 张 图 片 效 果 


(3) 请 完成 如 下 效果 。 
显示 一 组 文字 ， 该 文字 将 从 屏幕 的 右边 向 左边 滑动 ， 如 图 11-12 所 示 。 


图 11-12 上 机 题 3 文字 刚 开始 的 位 置 


@ 当 鼠标 停 在 文字 上 面 的 时 候 ， 文 字 将 停止 滑动 。 
四 当 文字 全 部 滑 到 最 右边 时 ， 将 会 从 左边 重新 开始 滑动 ， 如 图 11-13 所 示 。 


图 11-13 ”上 机 题 3 过 一 秒 后 文字 的 位 置 


(4) 请 完成 如 下 的 文字 效果 。 
@ 文 字 显示 出 来 时 ， 会 像 波 浪 一 样 由 上 到 下 闪 动 显示 ， 效 果 如 图 11-14 所 示 。 


次 欢迎 光临 


图 一 图 二 
图 11-14 文字 闪 动 效果 
@ 同 时 ， 如 果 鼠 标 停 在 文字 上 面 ， 则 字体 变 成 红色 ， 如 图 11-15 所 示 。 


图 11-15 ”鼠标 停留 效果 
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DIV+CSS 布 局 综述 


DIV+CSS 布 局 ， 现 在 已 经 广泛 地 应 用 在 网 页 设计 上 了 。 如 果 布 局 合 
理 ， 可 以 让 页 面 更 加 美观 ， 还 可 以 让 访问 者 精确 地 定位 到 网 页 的 某 一 功能 ， 
这 对 网 页 的 开发 提供 了 很 大 的 方便 。 为 了 让 大 家 更 好 地 了 解 这 种 布局 的 知识 
点 ， 在 本 章 中 ， 我 们 主要 讲述 的 重点 内 容 如 下 。 


各 种 布局 的 方式 

CSS 排 版 的 理念 

搭建 各 种 样式 布局 的 方法 

通过 排版 ， 构 建 出 美观 网 页 的 方法 


124 布局 方式 


布局 和 网 页 设计 有 着 很 大 的 关系 ， 本 节 主 要 学 习 使 用 DIV 对 网 页 进行 框架 分 析 ， 以 及 使 
用 DIV+CSS 进 行 网 页 样式 设计 的 方法 。 

不 过 布局 也 不 是 很 神秘 的 ， 只 要 了 解 一 些 DIV 版 式 的 知识 点 ， 再 加 上 一 些 平面 设计 的 知 
识 ， 就 能 开发 出 比较 美观 的 网 页 了 。 


《ES 用 DIV 将 页 面 分 块 


CSS 布 局 要 求 设计 者 首先 对 页 面 有 一 个 整体 的 框架 规划 ， 将 页 面 分 成 几 大 块 ， 每 个 大 块 
下 面 再 分 几 个 小 块 ， 这 些 都 需要 有 一 个 明确 的 定位 。 
一 般 页 面 布局 的 框架 包括 : 页 面容 器 、 页 面 头 部 、 页 面 主体 和 页 脚 几 个 部 分 ， 各 个 部 分 
使 用 ID 来 标识 ， 整 体 如 图 12-1 所 示 。 
一 般 页 面容 器 是 最 大 的 一 个 DIV 块 ， 它 将 所 有 的 部 分 包含 在 内 ， 这 样 方便 后 面 的 排版 ， 
并 且 方 便 对 页 面 进行 整体 调整 。 

页 面 头 部 一 般 都 包括 Logo 及 导航 菜单 等 一 些 信息 ， 页 面 主体 主要 是 网 页 所 要 显示 的 内 
容 、 链 接 及 广告 等 ， 页 脚 一 般 就 是 网 站 的 信息 、 版 权 等 内 容 。 
复杂 的 网 站 ， 样 式 框架 与 图 12-1 所 示 的 布局 都 非常 相似 。 


ol 


站 
院 


让 四 第 12 齐 Div+css 记 


加 


12-1 页 面 布局 框架 


人 ES 设计 各 块 的 位 置 


当 页 面 的 内 容 已 经 确定 好 后 ， 接 下 来 需要 根据 内 容 的 本 身 来 设计 整个 页 面 的 版 式 ， 如 页 
头 部 要 在 最 上 面 。 页 面 主体 部 分 要 在 中 间 位 置 ， 如 果 有 两 个 小 块 ， 则 需要 分 左右 排列 或 者 
是 上 下 排列 。 页 脚 部 分 在 页 面 的 最 下 方 ， 如 图 12-2 所 示 。 


出 


12-2 ”各 块 位 置 示例 图 


用 CSS 将 分 布 的 DIV 定 位 


在 网 页 设计 过 程 中 ， 根 据 需求 设计 好 各 模块 的 位 置 后 ， 就 可 以 利用 CSS 对 各 个 块 进行 定 
位 ， 从 而 实现 对 页 面 的 整体 规划 。 模 块 位 置 设计 完成 之 后 ， 就 可 以 向 各 个 模块 中 添加 对 应 的 
内 容 ， 从 而 完成 页 面 的 整体 设计 。 

在 定义 好 图 12-3 所 示 的 框架 后 ， 可 以 通过 如 下 的 HTML 代 码 实现 这 个 效果 。 


1. <html> 

2. <body> 

3. <div id="divmax"> 

4. <div id="divheader"> 
5 页 面 头 部 

6. </div> 

7. <div id="dqivContent"> 
8 . <div id="divleft"> 
9. 左面 内 容 页 

10. </div> 

11. <divid="divright"> 
12. ”右面 内 容 页 

3 <div 


人 GEDIV+CSSmmrnsna Re 


14. </div> 

15. <div id="divfoot"> 
16. ”页 脚 

ee 

18. </div> 

19. </body> 

20. </html> 


图 12-3 ”用 CSS+DIV 定 位 示例 图 


在 上 面 的 HTML 代 码 中 ， 第 1 行 与 第 20 行 是 html 标 签 ， 这 个 在 HTML 页 面 中 是 必须 有 的 标 
签 。 而 第 2 行 到 第 19 行 则 是 整个 HTML 页 面 的 主体 部 分 ， 使 用 的 是 body 标 签 ， 这 里 面 放置 整个 
HTML 页 面 所 要 显示 出 来 的 内 容 。 其 中 第 3 行 与 第 18 行 的 一 组 DIV 标 签 是 整个 内 容 部 分 最 大 的 
一 组 标签 ， 它 就 是 页 面容 器 ， 页 面 所 要 显示 的 内 容 都 会 在 它 的 内 部 来 编写 的 ， 并 且 在 这 里 还 
定义 了 DIV 的 ID 属性 ， 它 用 来 与 CSS 样 式 相关 联 。 

第 4 行 到 第 6 行 就 是 页 面 的 头 部 部 分 ， 它 属于 页 面容 器 的 一 个 小 块 ， 写 在 页 面容 器 块 的 内 
部 ， 在 页 面 头 部 部 分 一 般 用 来 放置 Logo 图 片 或 者 是 菜单 项 。 

第 7 行 到 第 17 行 定义 了 内 容 页 的 部 分 ， 主 要 用 来 显示 网 页 的 内 容 部 分 ， 这 里 分 了 左右 两 
个 小 块 ， 并 且 同时 定义 了 DIV 块 的 ID 属性 。 

第 18 行 到 第 20 行 是 页 脚 部 分 ， 一 般 放置 的 是 一 些 网 页 的 版 权 信 息 及 友情 链接 等 内 容 。 

分 析 完 了 HTML 页 面 的 代码 后 ， 下 面 来 看 一 下 如 何 使 用 CSS 代 码 将 页 面 变 得 更 美观 。 
在 HIML 代 码 中 ， 每 个 DIV 块 的 ID 属性 都 做 了 设置 ， 下 面 学 习 如 何 通过 ID 属性 来 使 用 CSS 样 
式 ，CSS 样 式 代码 如 下 所 示 。 


body { font-family:Verdana; font-size:14px; margin:0;} 

#divmax {margin:0 auto; width:500px;} 

#divheader { height:100px; background:#6cf; margin-bottom: 5px;} 
#divContent { height:200px; margin-bottom: 5px;} 

#divleft { float:left; width:200px; height:200px; background:#9ff;} 
#divright { float:right; width:300px; height :200px; background:#cff;} 
#divfoot { height:60px; background:#6cf;}° 


在 上 面 代码 中 ， 第 1 行 设置 了 body 的 属性 ， 这 个 属性 可 以 根据 自己 的 需要 来 设置 ， 不 设 
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置 也 可 以 ; 第 2 行 设置 的 是 页 面容 器 的 DIV 属 性 ， 因 为 HTML 页 面 中 设置 了 DIV 块 的 人 D 值 ， 所 
以 这 里 只 要 在 ID 属性 值 的 前 面 加 上 一 个 “#” 就 可 以 设置 该 块 的 样式 了 ， 这 种 使 用 ID 属性 来 
设置 样式 的 方法 ， 称 为 ID 选择 器 。 
有 了 ID 属性 ， 就 可 以 对 HTML 中 相应 的 DIV 块 进行 样式 设计 了 。 第 3 行 是 对 页 面 头 部 的 设 
置 。 第 4 行 是 对 整个 页 面 内 容 的 设置 。 第 5 和 第 6 行 是 对 内 容 部 分 里 的 两 个 子 块 所 做 的 设置 。 
第 7 行 是 对 页 脚 的 设置 。 
这 样 就 完成 了 使 用 DIV+CSS 对 页 面 进行 分 块 并 设计 样式 的 操作 了 。 


亿 2 CSS 排版 样式 


在 设计 页 面 的 时 候 ， 经 常会 用 到 一 些 排版 方式 ， 这 些 排版 方式 使 页 面 更 加 整齐 、 美 观 。 
本 节 将 介绍 几 种 排版 样式 ， 供 大 家 参考 。 


设计 上 中 下 版 式 的 样式 


许多 网 页 是 使 用 上 中 下 版 式 设计 的 ， 但 这 种 版 式 设计 不 会 出 现在 主页 面 上 ， 因 为 页 面 显 
示 的 内 容 比 较 少 ， 而 且 布 局 简单 。 
下 面 先 看 一 个 上 中 下 版 式 的 示例 ， 其 效果 如 图 12-4 所 示 。 


图 12-4 上 中 下 版 式 示例 


四 
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单 栏 
部 分 


从 上 面 的 效果 图 可 以 看 到 ， 这 个 页 面 一 共 分 为 三 个 部 分 ， 第 一 个 部 分 包含 了 图 片 及 菜 
， 这 一 部 分 内 容 都 是 放 在 页 面 的 最 上 方 的 ， 它 就 是 上 中 下 版 式 里 的 “上 ”部 分 ; 第 二 个 
是 中 间 的 内 容 部 分 ， 主 要 用 于 放置 需要 显示 的 文本 内 容 ， 这 就 是 上 中 下 版 式 里 的 “中 ” 
部 分 ， 第 三 个 部 分 是 页 脚 部 分 ， 放 置 了 一 些 链接 及 版 权 信息 ， 这 一 部 分 位 于 整个 页 面 的 最 下 


方 ， 它 是 上 中 下 版 式 里 的 “下 ”部 分 。 

这 是 一 个 很 典型 的 上 中 下 版 式 ， 下 面 我 们 来 分 析 一 下 这 个 实例 ， 以 掌握 这 种 排版 样式 ， 
它 的 HIML 代 码 如 下 所 示 。 

1. <body> 

2 <div class="big"> 

并 <div class="up"> 

a <p><a href="#"> 首 页 </a><a href="#"> 市 场 动 态 </a> 

5 <a href="#"> 最 新 产品 </a><a href="#"> 关 于 我 们 </a> 

6. <a href="#"> 联 系 我 们 </a> 

</p> 

:站 </div> 

号 = <div class="middle"> 

Le <br /> 

Te <h1> 凯 美 瑞 最 低 16 .78 万 中 高 级 车 价 战 再 升级 </h1> 

12. <p>16.78 万 元 ! 即使 回 到 年 初 ， 广 汽 凯美瑞 (图 库 论坛 ) 这 一 最 低 售 价 仍 难以 想像 ， 不 过 

近日 ， 它 却 成 为 现实 。 杭 州 5 家 广汽 丰田 经 销 商 目前 正大 张 旗 鼓 进行 联合 促销 ， 凯 美 瑞 全 系 
车 型 在 厂 方 指导 价 18 .28 一 28 .38 万 元 的 基础 上 优惠 1 .5 万 元 ， 且 附送 购车 礼包 。 
人 </p> 
14. <p> 这 是 凯美瑞 自 2006 年 6 月 上 市 以 来 ， 价 格 首次 跌 破 17 万 元 ， 也 是 继 马 自 达 6 (图 库 论坛 ) 
宣布 降价 至 14 .98 万 元 后 ， 杭 城中 高 级 轿车 又 一 次 价格 公开 探 底 。 

se </p> 

Oe </div> 

1 各 区 <div class="down"> 

18. <br /> 

9 <p> 

2 <a href="#"> 首 页 </a> | <a href="#"> 市 场 动态 </a> | 

De <a href="#"> 最 新 产品 </a> | <a href="#"> 关 于 我 们 </a> | 

2 <a href="#"> 联 系 我 们 </a> 

232 </p> 

A <p>2010 &copy; 上 海 润 飞 网 络 信息 科技 有 限 公 司 技术 支持 </p> 

2 </div> 

26 </div> 

27. </body> 

在 上 面 的 HTML 代 码 中 ， 第 2 行 与 第 26 行 是 最 外 层 的 DIV 块 ， 也 就 是 页 面容 器 块 ， 所 有 的 
内 容 都 放 在 这 个 容器 块 内 。 

第 3 行 到 第 8 行 的 代码 是 第 一 个 部 分 ， 即 最 上 面部 分 ， 这 里 定义 了 一 个 类 选择 器 的 名 字 ， 
为 后 面 使 用 CSS 样 式 做 准备 ， 同 时 还 列 出 了 菜单 项 的 内 容 。 

第 8 行 到 第 16 行 是 第 二 部 分 ， 也 就 是 中 间 部 分 ， 这 一 部 分 主要 用 于 显示 文本 内 容 的 ， 大 
家 可 以 看 到 这 里 同样 定义 了 一 个 类 选择 器 的 名 字 ， 然 后 在 下 面 列 出 了 所 有 需要 显示 的 内 容 。 

第 17 行 到 第 25 行 是 第 三 部 分 ， 也 就 是 最 下 面部 分 ， 这 一 部 分 定义 了 一 个 类 选择 器 名 字 ， 


及 所 要 显示 的 链接 和 版 权 信息 。 
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到 此 为 止 ， 网 页 上 所 要 显示 的 内 容 都 有 了 ， 但 是 样式 及 排版 都 还 没有 设置 ， 下 面 就 需要 
使 用 CSS 来 设置 样式 及 排版 ，CSS 样 式 代码 如 下 所 示 。 


1. bodyt{ 

2 font-family: "宋体"; 

3 font-size:12px; 

4. } 

A .big{ 

6 width:800px; 

和 margin:0 auto 0 auto; 

a } 

9。 -up{ 

Ti width:800px; 

i height :100px; 

1 background-image:url (001.jpg); 
1 公民 background-repeat :no-repeat; 
i 多 | 

和 5 .middlef{f 

16. background-color:#66CCFF; 
Es margin-top:10px; 

LO 上 

19. .downt{ 

20> background-color:#CCCCCC; 
2 height:80px; 

222 text-align:center; 

3 } 


在 上 面 CSS 代 码 中 ， 第 1 行 到 第 4 行 设置 了 body 标 签 的 属性 ， 包 括 字体 及 字体 的 大 小 ， 这 
里 也 可 以 不 设置 ， 而 使 用 默认 的 字体 及 字体 大 小 。 

第 5 行 到 第 8 行 设置 了 页 面容 器 的 样式 ， 页 面 的 宽度 设置 为 固定 值 800px。 第 9 行 到 第 14 行 
设置 最 上 面 一 块 的 样式 ， 包 括 这 一 块 的 宽度 及 高 度 ， 这 样 就 固定 了 这 个 块 的 大 小 ， 同 时 还 设 
置 了 这 个 块 的 背景 图 片 ， 就 是 菜单 栏 后 面 图 片 。 

第 15 行 到 第 18 行 是 中 间 文 本 部 分 的 样式 ， 因 为 前 面 在 body 中 已 经 设置 好 了 字体 及 其 大 
小 ， 所 以 这 里 就 不 需要 重复 设置 了 ， 只 需 设置 这 一 块 的 背景 色 。 最 后 第 19 到 第 23 行 设置 最 下 
面部 分 的 样式 ， 包 括 背 景色 、 块 的 高 度 及 其 位 置 、 居 中 显示 。 


设计 固定 宽度 且 居 中 的 样式 


在 页 面 排 版 中 ， 经 常会 用 到 一 些 宽度 固定 ， 并 且 要 求 所 有 内 容 都 居中 显示 的 样式 ， 本 小 
节 就 来 介绍 一 下 这 种 实现 固定 宽度 且 居 中 的 样式 的 方法 。 

在 图 12-5 所 示 的 效果 中 ， 就 用 到 了 固定 宽度 且 居 中 的 样式 ， 首 先 分 析 一 下 页 面 的 框架 ， 
整个 页 面 共 分 为 四 个 部 分 ， 包 括 Logo 部 分 、 导 航 菜单 部 分 、 内 容 部 分 和 页 脚 部 分 。 
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奔 暗 减 皮 ， 防 止 心 脑 血管 疾病 


降 肪 奈 肥 , 防止 心 肪 血管 详 病 。 议 茶 与 沽 和 的 关系 是 替 党 密切 的 ，《 神 农 本 草 》 一 书 早 在 二 千 多 年 前 已 提 
及 茶 的 减肥 作用 : “和 久 服 安心 荔 气 …… 轻 身 不 老 ”。 现 代 科学 研究 及 临床 实 壮 证 实 ， 饮 茶 庆 帖 降低 血液 中 的 血 
腾 及 得 固 述 ， 令 身体 变 神 轻盈 ， 这 是 因为 茶 里 的 天 类 从 生物 、 芳 香 类 物质 、 和 氨基 柄 类 物质 、 维 生 素 类 物质 综合 
协调 的 结果 ,特别 是 茶 多 酮 与 茶 素 和 维生素 [的 尝 合 作用 ,能够 促进 脂肪 氧化 ,帮助 消化 ， 降 及 减肥 。 此 外 。 
茶 多 酚 能 演 解 脂肪 、 而 维生素 5 则 可 促进 起 固 敌 排 出 体外 。 绿 茶 本 身 舍 茶 甘 林 ， 茶 甘 村 是 提高 血管 币 性 的 ， 使 
血管 不 容易 破 丑 。 


的 有 机 抗 说 物质 主要 有 茶 多 苔 、 茶 碱 、 维 生 素 C 
中 、 日 科学 家 认为 ， 茶 多 肉 中 的 儿 茶 索 抗 浆 效 


图 12-5 ”设计 固定 宽度 且 居 中 的 样式 


在 HIML 页 面 中 ， 将 DIV 的 框架 及 所 要 显示 的 内 容 显 示 出 来 ， 并 将 所 要 引用 的 样式 名 称 
定义 好 ， 具 体 的 代码 如 下 所 示 。 


1. <body> 

2. <div class="big"> 

9 <div class="1ogo"> 

4. <h1> 饮 茶 网 站 </h1> 

: 油 </div> 

6. <div class="nav"> 

<ul> 

8 <1i><a href="#"> 首 页 </a></1i> 

9. <1i><a href="#"> 绿 茶 知 识 </a></1i> 

oR <1i><a href="#"> 红 茶 知 识 </a></1i> 

Ta <1i><a href="#"> 茶 具 知识 </a></1i> 

2 

3 </div> 

14. <divclass="main"> 

和 <div class="left"> 

6s <img src="img/001.jpg" border="0" /> 

UT <p> 预 防 疾病 方面 : 红茶 的 抗菌 力 强 ， 用 红茶 激 口 可 防 滤 过 性 病毒 引起 的 感冒 ， 并 预防 星 
牙 与 食物 中 毒 ， 降 低 血 糖 值 与 高 血压 。</p> 

Be <img src="img/002.jpg" border="0" /> 

19. <p> 春 天 万 物 复苏 ， 宜 喝 花 茶 ， 以 驱 寒 狮 ， 促 阳 气 升 发 ; 
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20. 夏季 高 温 潮湿 ， 人 体 消 耗 较 大 ， 适 宜 喝 绿茶 ， 有 消暑 解 热 之 功效 </P> 


p42 


26. 


</div> 

<div class="right"> 

<div class="wen"> 

<h1> 降 脂 减 肥 ， 防 止 心 脑 血管 疾病 </h1> 
<p> 降 脂 减 肥 ， 防 止 心 脑 血 管 疾病 。 饮 茶 与 减肥 的 关系 是 非常 密切 的 ，《 神 农 本 草 》 一 书 
早 在 二 千 多 年 前 已 提 及 茶 的 减肥 作用 : " 久 服 安心 益 气 …… 轻 身 不 老 "。 现 代 科学 研究 及 
临床 实验 证 实 ， 饮 茶 能 够 降低 血液 中 的 血脂 及 胆固醇 ， 令 身体 变 得 轻 鼻 ， 这 是 因为 茶 里 的 酚 
类 簿 生物、 芳香 类 物质 、 氨 基 酸 类 物质 、 维 生 素 类 物质 综合 协调 的 结果 ， 特 别 是 茶 多 酚 与 
茶 素 和 维生素 C 的 综合 作用 ， 能 够 促进 脂肪 氧化 ， 帮 助 消化 、 降 脂 减 肥 。 此 外 ， 茶 多 酚 能 溶 
解 脂肪 、 而 维生素 C 则 可 促进 胆固醇 排出 体外 。 绿 茶 本 身 含 茶 甘 宁 ， 茶 甘 宁 是 提高 血管 韧性 
的 ， 使 血管 不 容易 破裂 。</p> 

<h1> 防 癌 </h1> 

<p> 绿 茶 所 含 的 成 分 一 一 一 茶 多 酚 及 咖啡 碱 ， 两 者 所 产生 的 综合 作用 ， 除 了 起 到 提神 、 养 
神 之 效 ， 更 具备 提高 人 体 免 疫 能 力 和 抗 癌 的 功效 。 近 年 ， 美 国 化 学 协会 总 会 发 现 ， 茶 叶 不 
仅 对 消化 系统 癌症 有 抑制 的 功效 ， 而 且 对 皮肤 及 肺 、 肝 脏 癌 也 有 抑制 作用 。 经 过 科学 研究 
确认 ， 茶 叶 中 的 有 机 抗 癌 物 质 主要 有 茶 多 酚 、 茶 碱 、 维 生 素 Cc 和 维生素 E; 茶叶 中 的 无 机 抗 
瘤 元 素 主要 有 硒 、 钼 、 锰 、 钳 等 。 中 、 日 科学 家 认为 ， 茶 多 酚 中 的 儿 茶 素 抗 癌 效 果 最 佳 。 </p> 


4 :加 </div> 

2 </div> 

30 </div> 

3 <div class="foot"> 

2 <p>2010 上 海 润 飞 网 络 信息 科技 版 权 所 有 </p> 
33 </div> 

34. </div> 

35. </body> 


在 上 面 的 HTML 代 码 中 ， 第 2 行为 页 面容 器 定义 一 个 样式 的 名 称 ， 从 第 3 行 到 第 5 行 定 义 
logo 块 的 样式 名 称 ， 第 6 到 13 行 是 导航 栏 块 ， 并 给 出 了 所 要 显示 的 内 容 及 定义 的 样式 名 称 ， 第 
14 行 到 第 30 行 是 内 容 部 分 ， 定 义 了 样式 的 名 称 ， 并 在 这 里 实现 了 固定 宽度 且 居 中 的 样式 ， 第 
31 行 到 第 33 行 是 页 脚 部 分 ， 同 样 实现 了 固定 宽度 且 居 中 的 样式 。 

接 下 来 介绍 页 面 的 样式 ， 我 们 按 固定 宽度 和 居中 两 个 效果 分 别 分 析 一 下 CSS 代 码 。 


1. 国定 宽度 


所 示 。 


oau 必 wm 


固定 宽度 就 是 将 块 的 宽度 设 为 固定 的 值 ， 让 其 不 能 够 自由 地 变 大 或 变 小 ， 主 要 代码 如 下 


.bigt{ 
width:900px; 
margin:0 auto 0 auto; 
-navt{ 
background-color:#C2E3E9; 
width:900px; 
height:20px; 
.maint{ 
width:900px; 
height:600px; 


人 IDIV+CSSmmr<sna IE 


下 3 让 

14. -left{ 

a width:180px; 

LG- float:left; 

17- height:600px; 

18. text-align:center; 
19. ¥ 

20. .right{ 

2 width:719px; 

22> float:left; 

3 height :600px; 

24. border-left:1px#cCCCC00 solid; 
2 } 

D6 .right .went{ 

2 width:600px; 

28. margin:0 auto 0 auto; 
4 } 


在 上 面 代 码 中 ， 可 以 看 到 这 些 样式 里 面 都 有 一 个 


用 于 设置 宽度 的 width 属 性 ， 代 码 将 
width 的 值 设置 成 了 一 个 固定 的 值 ， 这 样 让 使 用 这 个 样式 的 块 宽度 变 成 了 一 个 固定 的 值 ， 例 如 
代码 的 第 2 行 ， 将 big 块 的 宽度 定义 为 9000px， 那 么 big 块 的 宽度 只 能 是 90 


0px 大 小 ， 不 能 变 大 ， 


也 不 能 变 小 ， 也 就 说 它 必 须 严 格 按照 设置 的 大 小 来 显示 ， 


2. 居中 


这 就 实现 了 固 


定 宽度 的 要 求 。 


从 名 字 中 就 可 以 看 出 来 ， 这 是 要 把 内 容 放 在 块 的 中 间 显 示 。 在 页 面 中 ， 居 中 显示 是 很 党 


用 的 。 下 面 看 一 段 CSS 代 码 。 


Le aloEtl 

区 width:180px; 

3 float:left; 

4 height:600px; 

4 再 text-align:center; 
Gesth 

TOE 

gs height:15px; 

9 background-color:#CCCCCC; 
0. text-align:center; 
h | 


在 上 面 代码 中 ， 可 以 看 到 第 5 行 和 第 10 行 的 代码 一 样 ， 都 是 tex-align:center， 这 个 属性 是 


整个 排版 的 关键 语句 ， 因 为 设置 了 这 个 属性 后 ， 在 使 用 


这 个 样式 的 块 


h， 所 有 元 素 都 会 被 设 


置 为 居中 。 例 如 代码 第 5 行 设置 了 left 块 里 面 的 所 有 内 容 都 是 居中 显示 ， 而 在 效果 图 里 左面 中 


间 的 一 块 内 容 部 分 的 图 片 及 文字 所 显示 的 位 置 也 是 位 于 整个 块 的 中 间 部 分 ， 它 们 左右 边 距 的 


距离 都 是 相等 的 ， 这 就 实现 了 居中 的 效果 。 


设计 左 中 右 版 式 的 样式 


在 一 些 页面 中 ， 经 常 可 以 看 到 页 面 的 显示 内 容 部 分 ， 按 左上 


h 右 三 个 部 分 来 显示 内 容 ， 这 
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就 是 左 中 右 版 式 的 样式 ， 它 的 应 用 非常 广泛 。 左 中 右 版 式 的 效果 ， 如 
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， | 茶 多 酚 能 泻 解 脂 
肪 、 而 维生素 5 则 可 促进 胆 | 中 间 的 块 高 血 葵 初 性 的 ， 


素 主要 有 硒 、 钼 、 婚 、 插 等 。 中 、 日 科学 家 认为 ， 共和 本 中 的 儿 革 束 扩 认 交 果 量 住 。 


图 12-6 左 中 右 版 式 的 样式 


12-6 所 示 。 


从 效果 图 中 可 以 看 到 ， 左 中 右 版 式 的 样式 将 一 个 整 块 分 成 了 三 个 部 分 ， 而 这 三 部 分 的 布 
局 按 左 、 中 、 右 排列 。 下 面 我 们 来 看 一 下 上 图 所 示 的 左 中 右 版 式 例子 的 HTML 代 码 。 

1. <div class="big"> 

2. <divclass="left"> 

<div class="dh"> 

4. <ul> 

5 <1i><a href="#"> 首 页 </a></1i> 

6. <1i><a href="#"> 绿 茶 知识 </a></1i> 

了 <1i><ahref="#"> 红 茶 知 识 </a></1i> 

8. <1i><a href="#"> 茶 具 知识 </a></1i> 

9 </ul> 

10. ”<h2> 友 情 链接 </h2> 

1 <ul> 

TZ <1i><a href="#"> 玩 客 网 </a></1i> 

3 <1i><a href="#"> 玩 客 网 </a></1i> 

2 <1i><a href="#"> 玩 客 网 </a></1i> 

Te <1i><a href="#"> 玩 客 网 </a></1i> 

16. </ul> 

Ls /dv 

18. </div> 

19. <divclass="middle"> 

20. <div class="wen"> 

21. ”<h1> 降 脂 减 肥 ， 防 止 心 脑 血管 疾病 </h1> 

22. ”<p> 降 脂 减肥 ， 防 止 心 脑 血 管 疾病 。 饮 茶 与 减肥 的 关系 是 非常 密切 的 ，《 神 农 本草 》 一 书 早 在 

二 千 多 年 前 已 提 及 茶 的 减肥 作用 : " 久 服 安心 益 气 …… 轻 身 不 老 "。 现 代 科学 研究 及 临床 实 


验证 实 ， 饮 茶 能 够 降低 血液 中 的 血脂 及 胆固醇 ， 令 身体 变 得 轻盈 ， 这 是 因为 茶 里 的 酚 类 衍生 
物 、 芳 香 类 物质 、 氨 基 酸 类 物质 、 维 生 素 类 物质 综合 协调 的 结果 ， 特 别 是 茶 多 酚 与 茶 素 和 维 生 
素 c 的 综合 作用 ， 能 够 促进 脂肪 氧化 ， 帮 助 消化 、 降 脂 减肥 。 此 外 ， 茶 多 酚 能 溶解 脂肪 、 而 维 
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生 素 c 则 可 促进 胆固醇 排出 体外 。 绿 茶 本 身 含 茶 甘 宁 ， 茶 甘 宁 是 提高 血管 韧性 的 ， 使 血管 不 容 


易 破裂 。</p> 
23. </div> 
24. </div> 


25. <divclass="right"> 

26. <p><img src="img/003.jpg" border="0" /></p> 
27. <p> <img src="img/004.jpg" border="0" /></p> 
28. <p> <img src="img/005.jpg" border="0" /></p> 
2955 </ALy>: 


在 上 面 代码 的 第 1 行 定义 了 一 个 页 面容 器 的 样式 名 称 ; 从 第 2 行 到 第 18 行 ， 定 义 了 左边 块 


为 在 一 般 的 网 页 里 面 ， 这 个 位 置 放置 一 些 合作 信息 或 者 广告 。 


的 样式 名 称 及 所 要 显示 的 内 容 ， 一 般 这 一 块 用 来 放置 一 些 导航 菜单 或 者 链接 。 从 第 19 行 到 第 
24 行 是 中 间 块 的 样式 名 称 及 内 容 ， 这 一 块 主要 是 显示 详细 信息 的 ， 一 般 都 会 在 这 里 显示 左面 
链接 的 详细 内 容 ， 第 25 行 到 第 29 行 是 右边 的 一 块 ， 它 定义 了 样式 名 称 ， 还 使 用 了 一 些 图 片 ， 


上 面 整 个 页 面容 器 部 分 分 成 了 三 个 大 块 ， 每 个 块 按照 左 中 右 的 版 式 来 分 布 ， 想 要 实现 左 


中 右 版 式 的 效果 还 需要 CSS 样 式 的 配合 才 可 以 现实 。 下 面 来 看 一 下 CSS 所 需要 设置 的 相关 属 


性 ， 代 码 如 下 所 示 。 


.leftt { 

2 width:180px; 

3 float:left; 

4 height:500px; 

sd 

6. .middle { 

2 width:540px; 

8 float:left; 

9. height:500px; 

LO background-color:#FDFBCA; 
由 于 

LZ Tight 

意志 width:180px; 

4 float:right; 

De height:500px; 

Ge text-align:center; 

全 background-color:#F4FAFB; 
7 


在 上 面 代码 中 ， 第 1 行 到 第 5 行 设置 了 左边 块 的 样式 ， 其 中 float:left 将 这 一 块 设置 成 为 左 浮 


动 ， 这 样 就 使 这 一 块 的 位 置 靠 左 ， 不 至 于 影响 其 他 块 的 布局 。 


第 12 行 到 第 18 行 设置 了 右边 的 一 块 ， 这 里 可 以 看 到 float 的 属性 值 已 经 变 成 了 right， 就 是 


说 这 一 块 的 浮动 方式 是 右 浮 动 。 这 样 左右 两 块 的 部 分 都 已 经 设置 好 
了 ， 中 间 的 一 块 如 果 不 设置 的 话 会 默认 靠 左 ， 但 左面 已 经 设置 内 容 
块 内 容 向 右 侧 挤 过 来 ， 在 设置 排版 的 时 候 ， 需 要 将 宽度 设置 成 为 可 


了 ， 还 差 中 间 一 块 的 设置 
了 ， 所 以 会 自动 的 将 这 
以 容纳 这 三 块 宽度 的 值 ， 


所 以 这 一 块 就 会 自动 定位 到 中 间 来 了 ， 也 就 完成 了 效果 图 中 所 表现 


来 的 样式 了 。 
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和 设计 块 的 背景 色 及 青 景 图 片 
在 页 面 中， 经 常 看 到 一 些 图 片 或 文字 的 后 面 都 会 有 一 些 颜色 或 者 图 片 ， 使 得 页 面 更 加 美 


观 ， 其 实 这 只 是 应 用 了 背景 色 的 设置 ， 下 面 学 习 一 下 背景 色 是 怎么 设置 的 ， 我 们 先 看 一 个 效 
果 ， 如 图 12-7 所 示 。 


sw。 2 和 他 


首页 归 某 知识 


这 里 是 背景 色 


图 12-7 块 的 背景 色 

在 上 面 的 效果 图 中 可 以 看 到 ， 有 背景 的 部 分 一 共有 两 个 ， 一 个 是 背景 图 片 ， 一 个 是 纯 的 
背景 色 ， 它 们 在 页 面 中 经 常用 到 。 下 面 来 看 一 下 背景 色 及 背景 图 片 的 应 用 。 

1. 背景 色 

我 们 先 看 一 下 图 12-7 左 边 部 分 的 HTML 代 码 。 


1. <divclass="left"> 

2 <img src="img/001.jpg" border="0" /> 

3 <p> 预 防 疾病 方面 : 红茶 的 抗菌 力 强 ， 用 红茶 激 口 可 防 滤 过 性 病毒 引起 的 感冒 ， 并 预防 星 
牙 与 食物 中 毒 ， 降 低 血糖 值 与 高 血压 。</P> 
<img src="img/002.jpg" border="0" /> 
<p> 春 天 万 物 复苏 ， 宜 喝 花茶 ， 以 驱 寒 独 ， 促 阳 气 升 发 ; 

夏季 高 温 潮湿 ， 人 体 消 耗 较 大 ， 适 宜 喝 绿茶 ， 有 消暑 解 热 之 功效 </p> 


</div> 


在 上 面 代码 中 ， 没 有 直接 设置 背景 色 ， 背 景色 的 属性 在 CSS 样 式 中 设置 ， 在 HIMI 页 
中 还 是 和 其 他 的 页 面 一 样 ， 只 列 出 显示 的 内 容 及 样式 的 定义 。 一 般 背 景色 都 是 设 定 在 块 


our 


团 


U 
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的 ， 所 以 都 在 块 的 样式 里 设置 。 下 面 看 一 下 CSS 代 码 ， 以 理解 背景 色 的 设置 方法 。 


Te 
2 width:180px; 

电信 float:left; 

4. height:600px; 

5 text-align:center; 

5 background-color:#CCCCEF; 
了 


第 6 行 代码 background-color 用 于 设置 背景 色 的 属性 ， 后 面 是 颜色 的 名 字 ， 我 们 也 可 以 使 
用 red、black 这 样 的 英文 单词 来 为 属性 赋值 ， 这 样 就 为 块 加 上 背景 色 了 。 


2. 背影 图 片 


背景 图 片 的 设置 与 背景 色 的 设置 有 些 相似 ，HIML 代 码 中 不 放置 样式 代码 ， 所 以 这 里 就 
不 给 出 HIML 代 码 ， 主 要 来 看 一 下 CSS 代 码 。 


h .logo{ 

2 background-image:url (img/10go-bg.jpg); 
:人 background-repeat :no-repeat; 

4. height:100px; 

| 


上 面 第 2 行 代码 中 ，background-image 属 性 设置 了 背景 图 片 ， 后 面 的 url 括 号 里 的 内 容 是 图 
片 的 路 径 ， 设 好 图 片 路 径 后 ， 就 完成 了 背景 图 片 的 设置 。 
光 光 ”内 容 分 类 显示 版 式 


在 一 些 新 闻 网 页 中 ， 经 常 可 以 看 到 一 些 类 似 报纸 的 版 面 ， 按 内 容 一 块 一 块 分 布 ， 这 就 是 
内 容 分 类 显示 版 式 ， 这 种 版 式 的 应 用 也 是 很 广泛 的 。 下 面 介 绍 一 下 这 种 版 式 的 布局 方法 ， 我 
们 先 看 一 个 整体 效果 ， 如 图 12-8 所 示 。 


星 尚 资讯 

* 要 静 委 离婚 丈夫 索要 数 百 万 间 泉 产子 后 首 度 族 面 (图 ) “影院 看 30 世 界 杯 方案 或 格 天 折 《 驯 龙 高 手 》 儿 童 节 大 陷 
“ 郭富城 称 综 分 到 随时 结婚 任贤齐 儿女 精灵 可 爱 (图 ) “ 电影 版 《将 爱 》 低 调 开机 阿 娇 “ 膏 鱼 衣 ” 大 秀 身 形 图) 
"Selina 馈 结婚 S. HE 允 面 临 解 邓丽欣 再 陷 攀 照 凤 波 “* 权相佑 赤身 ?4 推 限制 级 电影 《 潭 马 镇 》 海 报 玩 控 宝 游戏 
“ 李嘉欣 不 抗拒 生子 (图 ) 部 莉 “ 黄晓明 起 递 郭 就 明 韩 塞 对 戏 格 罗 夫 毛 六 自 荐 饰演 师 蛛 侠 
“ 布 兰 妮 和 男友 爆发 泊 烈 争 内 疑 感情 再 次 出 现 危机 “S.IL ZE 丽 解 数 Selins 答 爸 看 好 婚事 望 其 退出 组 合 

“ 布 洛克 离婚 仍 启 负 继母 责任 陪 前 夫 孩 子 外 出 游玩 " Selina 向 父母 请 婚 任 爸爸 一 入 满意 给 文 奸 打 满分 

* 席 琳 。 狄 欧 怀 上 双胞胎 计划 下 月 确认 胎儿 性 别 “ 李嘉欣 透露 对 生育 无 温 求 否认 帮 姐 姐 拱 路 嫁 豪 门 

“ 日 男 星 琪 太 与 歌手 木村 将 奉子 成 婚 官网 公布 喜讯 “ 刘 心 粘 估 慑 白色 婚礼 坦言 河 电 媳 人 婚 后 不 设防 


图 12-8 内容 分 类 显示 版 式 示例 图 
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局 生 这 


四 


又 松 地 实现 上 


从 上 面 的 图 中 ， 可 以 很 明确 地 看 出 这 个 效果 分 成 了 上 下 两 个 大 块 ， 下 面 的 大 块 又 分 成 了 


个 小 块 ， 这 四 个 小 块 里 面 所 显示 的 内 容 及 类 别 都 各 不 相同 。 页 面 的 块 划分 完成 后 ， 就 能 很 
图 


的 效果 了 ， 我 们 先 来 看 一 下 HTML 代 码 部 分 。 


<html> 
<body> 
<div class="big"> 
<div class="up"> 
<img src="002.jpg" /> 
</div> 
<div class="down"> 
<div class="one"> 
<h2> 星 尚 资讯 </h2> 
<p>" 贾 静 去 离婚 丈夫 索要 数 百 万 袁泉 产子 后 首 度 露 面 (图 ) </p> 
<p>* 郭 富 城 称 缘分 到 随时 结婚 任贤齐 儿女 精灵 可 爱 (图 ) </p> 
<p>。Selina 欲 结婚 S .H.E 恺 面临 解散 邓丽欣 再 陷 艳 照 风 波 </p> 
<P> "李嘉欣 不 抗拒 生子 (图 ) 凯 莉 </p> 
</div> 
<div class="two"> 
<h2> 影 视 资讯 </h2> 
<p>* 影 院 看 3D 世 界 杯 方案 或 将 天 折 《 驯 龙 高 手 》 儿 童 节 大 赚 < /p> 
<p>* 电 影 版 《将 爱 》 低 调 开 机 阿 娇 " 劾 鱼 衣 " 大 秀 S 身 形 (图 ) </p> 
<p>* 权 相 佑 变 身 F4 推 限制 级 电影 《 刹 马 镇 》 海 报 玩 挖 宝 游戏 </p> 
<p>* 黄 晓 明 想 邀 郭敬明 韩寒 对 戏 格 罗 夫 毛遂自荐 饰演 蜘蛛 侠 </P> 
</div> 
<div class="one"> 
<h2> 国 际 星 闻 </h2> 
<p>* 布 兰 妮 和 男友 爆发 激烈 争吵 疑 感 情 再 次 出 现 危 机 </p><p> 


.“ 布 洛克 离婚 仍 肩负 继母 责任 陪 前 夫 孩 子 外 出 游玩 </p><p> 
-“ 席 琳 。 狄 伟 怀 上 双胞胎 计划 下 月 确认 胎儿 性 别 </p><p> 
-“ 日 男 星 瑛 太 与 歌手 木村 将 奉子 成 婚 官网 公布 喜讯 </p><p> 


</div> 
<div class="two"> 
<h2> 港 台 星 闻 </h2> 


. <p>*S.H.E 恐 解散 Selina 和 爸爸 看 好 婚事 望 其 退出 组 合 </p><p> 
.。Selina 向 父母 请 婚 任 爸 爸 一 脸 满意 给 女 婚 打 满分 </p><p> 

-。 李 嘉 欣 透露 对 生育 无 渴求 否认 帮 姐 姐 搭 路 嫁 豪 门 </p><p> 

.“。 刘 心 悠 慷 慢 白色 婚礼 坦言 闪电 嫁 人 婚 后 不 设防 </p><p> 


</div> 


. </div> 
-</div> 

-</body> 
-</thml> 


上 面 代 码 中 ， 第 3 行 与 第 37 行 的 代码 是 页 面容 器 的 块 部 分 ， 页 面 上 所 有 的 内 容 都 是 放 在 


由 


们 


面容 器 里 的 ， 所 以 页 面容 器 一 般 都 放 在 最 外 层 。 


第 4 行 到 第 6 行 则 是 第 一 个 大 块 ， 上 面 只 显示 了 一 张 图 片 ， 样 式 写 在 CSS 文 件 中 ， 所 以 我 
需要 定义 一 个 选择 器 来 关联 到 相应 的 样式 ， 这 里 使 用 了 类 选择 器 class。 
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第 7 行 到 第 36 行 是 下 面 整个 大 块 的 代码 ， 这 里 先 定义 了 选择 器 类 型 及 相关 的 样式 名 称 。 
这 一 个 大 块 由 四 个 小 块 组 成 ， 每 一 个 小 块 都 会 放置 一 种 类 别 的 内 容 。 这 四 个 小 块 的 样式 有 两 
种 ， 相 同样 式 的 块 使 用 了 同一 个 样式 ， 同 时 列 出 小 块 的 内 容 ， 这 样 就 完成 了 HTML 页面。 

接 下 来 定义 CSS 样 式 ，CSS 样 式 代 码 如 下 所 示 。 


bgal 


和 

pp width:850px; 

3 margin:0 auto 0 auto; 
sh 
ed 

6 width:850px; 
7 height:100px; 
0 


9. .down{ 

Oe width:850px; 

i background-color:#FDEEFC; 
2 

13. one { 

14. width:400px; 

ps float:left; 

Gs border:#0066FF lpx solid; 
Es margin-top:10px; 

Eee 

LT9- LEwWOM 

之 从 二 width:400px; 

2 float:left; 

2 margin-left:46px; 

2 margin-top:10px; 

24. border:#CC3300 lpx solid; 
25= 


第 1 行 到 第 4 行 设置 了 页 面容 器 的 样式 ， 宽 度 固定 为 850px。 第 5 行 到 第 8 行 设置 了 第 一 个 
大 块 的 样式 ， 包 括 它 的 宽度 及 高 度 。 

第 9 行 到 第 12 行 设置 了 第 二 个 大 块 的 样式 ， 包 括 宽度 ， 宽 度 与 上 面 第 一 大 块 的 宽度 相 
同 ， 这 样 上 下 两 个 块 就 会 对 齐 ， 不 会 出 现 偏差 。 在 页 面 中 的 第 二 大 块 有 两 种 样式 ， 第 13 行 到 
第 18 行 所 设置 的 是 第 一 种 样式 ， 它 设置 了 宽度 、 对 章 方式 以 及 边框 的 样式 。 第 19 到 第 25 行 是 
第 二 种 样式 的 设置 ， 而 第 二 种 与 第 一 种 样式 所 需要 设置 的 属性 都 差不多 ， 只 是 值 不 同 而 已 ， 
所 以 我 们 就 不 一 一 列 出 了 。 

到 此 为 止 就 完成 了 内 容 分 类 显示 的 样式 。 其 实 不 管 什么 样式 ， 只 要 完全 理解 了 DIV 的 
页 面 分 块 ， 所 有 的 页 面 都 可 以 按 块 分 析 ， 再 加 上 一 些 CSS 样 式 的 设置 就 都 能 够 实现 所 需要 
的 效果 了 。 
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人 2.3” 实 训 一 构建 一 个 上 下 结构 的 页 面 


范例 12-1: 【光盘 位 置 】\sample\chap12\ 构 建 一 个 上 下 结构 的 页 面 \index.html 


在 前 面 的 章节 里 ， 讲 述 了 一 些 排版 的 方法 ， 本 节 通 过 一 个 真实 的 案例 ， 说 明 一 下 上 下 
结构 网 页 的 排版 方式 。 以 前 我 们 通过 范例 讲述 CSS 知 识 点 ， 而 本 节 需 要 大 家 把 注意 力 集中 在 
“排版 ”这 个 主题 上 。 


1. 需求 描述 


这 个 范例 的 效果 如 图 12-9 所 示 ， 它 的 排版 方式 采用 上 下 结构 。 


1234558163. cem, 您 上 次 登录 的 信息 是 : 

时 间 : 2009-12-26 17:00 

所 在 地 : 上 海 

如 有 不 罕 ， 请 及 时 联系 管理 员 ,并 及 时 修改 密码 。 
修改 密码 >》》 


安全 建议 
在 进行 登录 、 支 付 等 拘 作 前 请 先 仔细 查看 网 站 的 主 域名 是 否 为 http://wew_ S2wank cea/ 
有 些 网 站 会 伪装 成 我 们 网 站 ， 等 悠 输 入 帐号 和 密码 的 时 候 ,会 自动 记录 您 的 帐号 密码 信息 ， 从 而 鹰 走 帐户 ， 疆 您 造成 经 济 捐 失 。 


页 脚 部 分 是 第 四 行 


图 12-9 上 下 结构 实 训 效果 图 


具体 的 要 求 如 下 。 

@ 在 第 1 行 的 DIV 里 ， 放 置 Logo 和 导航 菜单 ， 它 们 分 别 是 靠 左 和 靠 右 对 齐 。 

@ 在 第 2 行 的 DIV 里 ， 放 置 4 个 按钮 ， 同 时 把 DIV 的 背景 设置 成 蓝 色 ， 按 钮 靠 右 对 齐 。 
@@ 在 正文 部 分 ， 放 置 一 些 文字 ， 这 些 文字 可 以 理解 成 为 段落 ， 靠 左 对 齐 。 

图 在 最 下 方 的 页 脚 部 分 里 ， 文 字 居 中 对 齐 。 
2. 开发 步骤 
首先 使 用 DIV 在 页 面 上 为 内 容 设置 DIV 块 ， 图 12-10 中 的 每 个 框框 代表 着 一 个 DIV， 而 每 

个 DIV 里 ， 可 以 放置 合适 的 要 素 。 
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玩 客 网 


Www S52wonk com OTT OI NE 二 首 页 | 和 的 折 客 | 和 账户 | 帐户 大 全 


234568163. eowm, 您 上 次 登录 的 信息 是 : 
间 : 2009-12-26 17:00 


如 有 不 符 ， 请 及 时 联系 管理 员 ,并 及 时 修改 密码 。 


全 建 
演进 行 登录 、 支 付 等 失 作 前 请 先 他 绝 查 看 网 站 的 主 域 名 是 否 为 http: /ev Sevank. com/ 


务 | 联系 和 奸 1 
于 客 网 @ 2009 版 权 所 有 


12-10 上 下 实 训 DIV 分 块 示 列 


出 


3. 开发 页 头 部 分 的 DIV 和 CSS 部 分 的 样式 


本 实 训 使 用 了 上 下 结构 ， 我 们 可 以 从 项 端 开始 向 下 设计 ， 下 面 是 第 一 行 的 两 个 DIV， 它 
们 包含 在 logo_up 这 个 大 的 DIV 里 。 


1. <divclass="l0go up"> 


2 <div class="l0go up left"><img src="images/w-l0go.gif" border="0" /></ 
div> 

gs <div class="logo up right"> 

2 <p><a href="#"> 玩 客 网 首页 </a> | <a href="#"> 我 的 玩 客 </a> | 

5 <a href="#"> 我 的 账户 </a> | <a href="#"> 账 户 充值 </a> 

站 </p> 

</div> 

8. </div> 


在 上 面 代码 中 ， 第 2 行 定义 了 Logo， 第 3 到 第 7 行 的 DIV 中 ， 定 义 了 右边 部 分 的 导航 信息 ， 
而 Logo 和 导航 菜单 ， 包 含 在 第 1 到 第 8 行 的 DIV 里 。 

为 了 保证 这 整 块 DIV 的 样式 ， 我 们 引入 了 logo_up、logo_up_left 和 logo_up_right 块 的 三 个 
CSS， 代 码 如 下 所 示 。 
-10go_upf{ /* 设 置 宽度 和 高 度 */ 

width:900px; 

height:80px; 


1 
-lo0go up left{ 
width:250pxzx; 
float :left; /* 设 置 向 左 悬 浮 */ 
1 
.logo up right{ 
width:650pxzx; 
float :left; /* 设 置 向 右 悬 浮 */ 


Oop 


上 上 
Po，: 
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1 text-align:right; 
3 

14. .logo up right p{ 

5 margin-right:15px; 
16% margin-top:60px; 

1 Sr el 


在 上 面 代 码 中 ， 第 1 行 的 logo_up 样 式 ， 定 义 了 整体 第 一 行 DIV 的 宽度 和 高 度 。 第 5 行 的 
logo_up_left， 不 仅 声 明了 logo 部 分 的 宽度 ， 以 及 向 左 悬 浮 的 对 齐 方式 。 第 9 行 的 .logo_up_right 
样式 ， 同 样 设置 了 宽度 和 向 右 对 齐 的 方式 。 


4. 开发 第 二 行 导 航 部 分 
导航 部 分 的 代码 相对 简单 ， 如 下 所 示 。 


1. <div class="1ogo_ dh"> 

2 <p><a href="#"> 账 户 首页 </a><a href="#"> 我 的 账户 </a> 
3 <a href="#"> 账 户 充值 </a><a href="#"> 安 全 中 心 </a> 
4. </p> 

5 </div> 


代码 通过 第 1 行 的 logo_dh 样 式 ， 设 置 这 个 DIV 的 宽度 ， 由 此 设置 这 个 DIV 和 第 一 行 的 页 头 
DIV 是 相同 宽度 ，logo_dh 的 代码 如 下 所 示 。 


1. .logo dh{ 

2 background-image:url(../images/zhifu up dh.gif); 
号 background-repeat:no-repeat; 
4. height:50px; 

a line-height:50px; 

6. width:900px; 

rh 

8. .logo dhp{ 

9. text-align:right; 

LOE margin-right:30px; 

ee margin-top: 6px; 

le 


其 中 ， 第 6 行 指 定 了 宽度 ， 使 这 个 DIV 和 第 一 行 的 DIV 具 有 相同 的 宽度 ， 这 样 才 能 实现 两 
个 板块 的 对 齐 。 第 2 行 设置 了 这 个 DIV 的 背景 色 ， 由 此 实现 底 色 变 蓝 的 效果 。 


5. 开发 正文 部 分 的 效果 
E 文 部 分 的 HIML 代 码 如 下 所 示 。 


EE 


1. <divclass="zhuti"> 

2 <div class="zhifu name"> 

3 <p>123456@163.com<span style="color:#FF6600;">, 欢迎 您 ! </span></p> 
4 </div> 

和 <div class="my zhuti up"> 

6 <div class="zhifu up f"> 

7 <div class="zhifu up f left"> 

8 <p> 您 当前 的 余额 为 : <span style="color:#FF0000; font- 
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weight:800;">1241</span> 元 </p> 


9。 </div> 

LO <div class="zhifu up f right"> 

1 <p><img src="images/zhifu chongzhi .gif" border="0" /></p> 

12> </div> 

35 </div> 

14. </div> 

15. <divclass="my zhuti down"> 

16. <div class="down nei"> 

72 <div class="wen"> 

18 . <p><span style="color:#FF6600; font-weight:800;"> 

Eg 123456@163.com 

20E </span>, 您 上 次 登录 的 信息 是 : 

2 </p> 

22 <p> 时 间 : 

2 <span style="color:#FF6600; font-weight:800;"> 

24. 2009-12-2617:00 

pa </span> 

ZE </p> 

py <p> 所 在 地 : <span style="color:#FF6600; font-weight:800;"> 上 海 </span></p> 

28. <p> 如 有 不 符 ， 请 及 时 联系 管理 员 ， 并 及 时 修改 密码 。</p> 

29. <p><a href="#"> 修 改 密码 ggt; &gt; &gt;</a></p> 

30ke </div> 

3 <div class="safe jianyi"> 

对 2 <h1> 

33 安全 建议 

34. </h1> 

35. <p> 在 进行 登录 、 支 付 等 操作 前 请 先 仔细 查看 网 站 的 主 域名 是 否 为 http://www.52wank. 
com/</p> 


6 <p> 有 些 网 站 会 伪装 成 我 们 网 站 ， 等 您 输入 帐号 和 密码 的 时 候 ， 会 自动 记录 您 的 帐号 密码 信 
息 ， 从 而 盗 走 帐 户 ， 给 您 造成 经 济 损失 。</p> 


37. </div> 
39. </div> 
39 </div> 


正文 部 分 包含 在 一 个 大 DIV 里 ， 这 个 DIV 样 式 由 第 1 行 的 zhuti 定 义 的 CSS 控 制 。 在 这 部 
分 样式 中 ， 同 样 设置 了 宽度 为 900px， 以 保证 和 其 他 DIV 对 齐 ， 同 时 设置 了 上 部 的 外 边 距 是 
5px， 这 样 才能 和 第 二 行 的 导航 部 分 DIV 保持 一 定 的 距离 ， 代 码 如 下 所 示 。 


Thuy 

2 width:900px; 

3 margin-top:S5px; 
E 


6. 开发 页 脚 部 分 的 效果 
页 脚 部 分 需要 实现 居中 的 效果 ， 它 的 HTML 代 码 如 下 所 示 。 


1. <div id="foot"> 

2. ”<p><a href="#"> 关 于 我 们 </a> | <a href="#"> 广 告 服务 </a> | <a href="#"> 联 系 我 们 
</a> | <a href="#"> 法 律 声明 </a> | <a href="#"> 合 作 渠 道 </a> | <a href="#"> 友 情 链 
接 </a> </p> 
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3. ”<p> 玩 客 网 @ 2009 版 权 所 有 </p> 


4. </div> 


代码 相对 简单 ， 一 些 样式 是 定义 在 第 1 行 的 foot 里 的 ， 我 们 来 看 一 下 其 中 的 代码 。 


1 Eo0t { 
2 margin-top:15px; 
) width:898px; 
4. text-align:center; 
5 border-top:#999999 solid lpx; 
6 margin-left:auto; 
Te margin-right:auto; 
:2 
代码 第 4 行 ， 定 义 了 文字 的 对 齐 方 式 ， 而 第 3 行 定义 了 整个 DIV 的 宽度 ， 这 里 是 898px， 
和 前 面 的 900px 非 常 靠近 。 


亿 .4” 实 训 一 构建 一 个 左 中 右 结构 的 页 面 


范例 12-2: 【光盘 位 置 】\sample\chap12\ 构 建 一 个 左 中 右 结构 的 页 面 \index.html 

在 前 面 一 节 中 ， 我 们 练习 了 一 道上 下 结构 的 页 面 ， 本 节 再 做 一 个 左 中 右 结构 的 页 面 实 
训 ， 来 学 习 一 下 左 中 右 结构 网 页 的 排版 。 在 一 个 网 页 中 往往 会 同时 用 到 几 种 不 同 的 设计 样 
式 ， 本 节 主 要 使 用 的 是 左 中 右 结构 的 版 式 。 

1. 需求 描述 

这 里 将 开发 一 个 如 图 12-11 所 示 的 优惠 产品 页 面 ， 页 面 上 每 个 优惠 产品 的 排版 方式 就 是 左 
中 右 结构 。 因 为 效果 图 里 面 上 中 下 三 个 层 的 效果 一 样 ， 而 且 所 用 到 的 技术 也 都 一 样 ， 所 以 我 
们 只 针对 上 面 的 一 个 大 块 进行 说 明 。 


此 游 可 享 以 下 忧 高 : 人 中 式 指 压 48 元 钦 ; 日 中 药 足疗 48 元 / 一 

精油 开 背 68 元 钦 ; 吕 到 现 风 情 208 元 多 ; E 百草 集 精华 | 上 
SpA 下 价 486 元 钦 [中 国 的 纪 可 右边 的 块 

加 


有效 风 限 : 2010-7-28 0-00:00 被 下 载 次 数 : 3 


被 下 载 次 数 : 0 


有 效 期 限 : 2010-6-9 0:00:00 被 下 载 次 数 : 0 


图 12-11 ” 左 中 右 实 训 效果 图 
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具体 的 要 求 如 下 。 


@ 在 左边 的 DIV 中 ， 放 置 Logo 和 名 称 ， 它 们 的 位 置 是 上 面 放 图 片 ， 下 面 放 名 称 。 
@ 在 中 间 的 DIV 中 ， 显 示 了 优惠 项 目的 详细 说 明 、 有 效 期 及 下 载 次 数 。 

加 在 右边 的 DIV 中 ， 垂 直 放 置 了 三 个 按钮 。 

@ 在 最 下 面 的 DIV 中 ， 有 一 个 布 满 整 个 块 的 虚线 。 


2. 开发 步骤 


首先 需要 使 用 DIV 在 页 面 上 为 内 容 分 块 ， 下 面 的 每 个 蓝 色 的 虚线 代表 一 个 大 的 DIV 块 ， 
每 一 个 红色 的 实 线 代 表 着 一 个 小 的 DIV 块 。 这 部 分 所 需要 的 技术 主要 就 是 每 个 蓝 色 分 隔 开 的 
大 块 ， 我 们 先 从 第 一 个 蓝 色 大 块 开始 开发 ， 如 图 12-12 所 示 。 


r 三 二 1 和 作 此 送 可 享 以 下 忧 囊 : 人 中 式 指 压 48 元 钦 ; 日 .中 药 足疗 48 元 / 
左面 的 块 精油 开 背 68 元 钦 ; D 和 玫 魂 风情 208 元 钦 ; E. 百 草 集 精华 
-1 [中 同 的 块 右边 的 上 
区 效 基 BR : 2010-7-28 0.00'00 被 下 载 次 数 : 3 


有 效 区 PR : 2010-6-9 0:00:00 


图 12-12 ” 左 中 右 实 训 DIV 分 块 示例 图 


3. 开发 第 一 个 大 块 的 部 分 
首先 分 析 第 一 个 大 块 的 内 容 ， 这 一 个 大 块 的 HIML 代 码 如 下 所 示 。 


1. <DIVclass=zhong list> 
2 <DIV class=1ist 1><IMG height=100 alt= 滨 河 国际 SPA 休 闲 会 所 
.Src="images/805_ coupon 201035103101.jpg" width=100 border=0> 


3 <P style="FONT-WEIGHT: 400; FONT-SIZE: 12px"> [滨河 国际 SPRA 休 闲 会 所 . ] </P> 

4 </DIV> 

本 <DIV class=1ist_z> 

6 <DIV class=1 z nei> 

也 <P> . 赁 此 券 可 享 以 下 优惠 : A. 中 式 指 压 48 元 /次 ; B. 中 药 足疗 48 元 /次 ; C-. 精 油 开 背 
68 元 /次 ; D. 玫 瑰 风 情 208 元 /次 ; 

8. 巨 . 百 草 集 精华 专业 水 疗 SPA 体 验 价 488 元 /次 ; </P> 

9. </DIV> 

os <DIV class=] z jiao> 

下 加 <P> 有 效 期 限 : <SPAN style="COLOR: #ff0000">2010-7-28 0:00:00</ 
SPAN><SPAN 


12. style="MARGIN-LEFT: 80px"> 被 下 载 次 数 : 3</SPAN></P> 
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</DIV> 
</DIV> 
<DIV class=list r> 

<DIV class=1 r one> 

<INPUT id=Rpt couponList ct100 ImageButtonl title= 打 印 优 惠 卷 
style="BORDER-TOP-WIDTH: Opx; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-— 

WIDTH: Opx; BORDER-RIGHT-WIDTH: Opx" 
. type=image src="images/youhui img/youhui dayin.gif" 
. name=Rpt couponList$ct1l00$ImageButtonl> 

</DIV> 
<DIV class=1 r one> 

<INPUT id=Rpt couponList ct100 imgbtnDownLoad title= 下 载 图 片 
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM- 
WIDTH: Opx; BORDER-RIGHT-WIDTH: 0px" type=image src="images/youhui 
img/youhui xiazai.gif"name=Rpt couponList$ct100$imgbtnDownLoad> 
</DIV> 
<DIV class=1 r one> 
. <IMG alt= 查 看 详细 src="images/youhui img/youhui chakan.gif"border=0></ 

DIV> 

</DIV> 

-</DIV> 


在 上 面 代码 中 ， 第 1 行 定 义 了 整个 大 块 的 CSS 样 式 名 称 。 在 第 2 行 到 第 4 行 的 DIV 中 ， 定 义 
了 左边 部 分 的 所 要 显示 的 图 片 及 名 称 。 在 第 5 行 到 第 14 行 的 DIV 中 ， 定 义 了 中 间 所 要 显示 的 内 
容 ， 包 括 了 优惠 项 目的 介绍 、 有 效 期 及 下 载 次 数 。 而 在 15 行 到 第 26 行 的 DIV 中 ， 定 义 了 右边 
的 一 块 所 要 显示 的 3 个 图 标 按钮 ， 并 且 设 置 了 一 些 相关 属 性 。 

每 一 个 DIV 块 都 定义 了 一 个 class 名 称 ， 这 个 名 称 就 是 与 CSS 样 式 相关 联 的 主要 关键 字 。 


六 
- 意 
Ed 


class 关 键 字 是 CSS 选 择 器 中 的 一 种 ， 叫 做 类 选择 器 ， 在 CSS 文 件 中 样式 的 开头 使 用 了 “.” 这 个 
符号 ， 说 明 这 个 样式 会 和 应 用 了 这 个 样式 的 块 相关 联 ， 从 而 使 用 到 样式 。 类 选择 器 与 前 面 我 
们 讲 的 ID 选择 器 不 同 ， 类 选择 器 可 以 应 用 到 多 个 块 内 ， 而 不 会 发 生 冲突 ， 而 ID 选择 器 不 能 应 
用 在 多 个 块 里 ， 因 为 有 的 地 方 会 发 生 冲 突 ， 使 其 不 能 够 正常 的 运行 。 


为 了 保证 整 块 DIV 的 样式 ， 代 码 中 引入 了 一 些 针 对 这 些 DIV 块 的 CSS 样 式 ， 其 代码 如 


下 所 示 。 
TE. zhong 1ist 
eh 
| width: 550px; 
4. border-bottom: dashed lpx #FF6600; 
5 请 margin-top: 5px; 
6. min-height:105px; 
A 
3 us 
3. 1{ 
10. width: 120px; 
11. text-align: center; 
12. float: left; 
13. overflow:hidden; 
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14. _overflow:visible; 
了 

16: .Iist 2 

Le 

18. width: 350px; 

9. HoaE> LoFE2 

205P 

2 TZ 

| 

23. height: 84px; 

24. line-height: 15px; 
25P 

26> > TE] 

Py 

28. height: 18px; 

29. line-height: 18px; 
污 和 下 让 

3 

pp 

33. width: 80px; 

34. float: left; 

eh 

36. .1 r one 

ee 

38. text-align: center; 
39. margin-top: 3px; 
40. height: 26px; 

| 


其 中 ， 第 1 行 到 第 7 行 设置 了 整个 大 块 的 样式 ， 包 括 它 的 宽度 等 属性 ， 第 8 行 到 第 15 行 设 
置 了 所 要 显示 的 图 片 及 名 称 的 样式 ， 主 要 有 宽度 及 对 齐 方式 ， 第 16 行 到 第 30 行 设置 了 所 要 显 
示 的 详细 内 容 、 有 效 期 和 下 载 次 数 等 属性 ， 这 样 显示 出 来 的 内 容 就 会 整齐 一 些 ， 主 要 有 块 的 
宽度 、 文 字 的 字号 、 对 齐 方式 等 属性 ， 第 31 行 到 第 41 行 设置 了 右边 三 个 按钮 的 样式 ， 其 中 也 
包括 了 宽度 、 对 齐 方式 及 按钮 上 文字 对 齐 等 。 


位 5 上 机 是 


(1) 请 使 用 DIV+CSS 排 版 来 完成 如 图 12-13 所 示 的 页 面 的 排版 。 
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3 
、 


国家 旅游 局 警示 : 禁 收 老年 游 附 加 费 


以 老年 人 、 吾 少年 消费 水 平 不 高 为 由 ， 向 60 岁 以 上 老年 人 和 16 岁 以 下 青少年 收 职 附加 费 成 为 旅游 业 “ 潜 规则 ”， 国 家 旅游 局 质量 招 具 管理 所 昨天 发 
布 的 今年 第 三 号 旅游 服务 警示 强调 , 同一 旅游 男 队 中 ,旅行社 不 得 由 于 旅游 者 存在 的 年 疮 或 者 职业 上 的 差异 提出 附加 费用 ,否则 格 受 到 处 罚 。 

部 分 旅行 社 向 60 岁 以 上 老年 人 收 职 附加 费 旅游 骤 务 警示 提示 消费 者 ,根据 《旅行 社 条 例 实施 岂 则 》 规 定 ,除非 旅 行 社 提供 了 与 其 地 旅游 者 相 比 更 多 
的 服务 或 旅游 者 主动 要 求 ， 否 则 同一 旅游 田 队 中 ,旅行社 不 褐 由 于 旅游 者 存在 的 年 苓 或 者 职业 上 的 差异 ,提出 与 其 盐 旅 游 者 不 同 的 合同 事项 ,加 附加 费 


用 等 , 违 者 要 受到 处 罚 
不 走 寻 党 路 海南 最 值得 去 冒险 的 最 点 英国 名 瞬 皇 家 胜利 号 装 进 “小 闫 ” 
赏 守 外 美 最 探寻 亲政 神秘 宝塔 外 图 ) 哥伦比亚 年 见 的 地 下 盐 矿 教堂 
旅行 中 升华 80 后 而 立 之 年 必 去 三 大 旅游 地 走 进 奥 十 丽 赫本 大 婚 之 地 (组 图 ) 
重新 认识 “天 堂 ” 杭州 三 条 隐秘 栈 路 推荐 罕见 的 欧洲 早生 动物 景观 ( 姐 图 ) 
心 驰 神 往 八条 上 海 周边 自驾 游 推荐 组 图 ) 新 鲜 体验 秘 生 三 行 “青蛙 计 ” 
明媚 初夏 六 条 线路 品 出 江南 的 六 种 抱 珠 皖 秘 秘鲁 纳 斯 卡 文明 之 迹 图 ) 
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12-13 ”上 机 题 1 效果 


出 


12-13 使 用 了 上 中 下 版 式 ， 其 中 上 面 的 图 片 为 第 一 块 ， 中 间 的 内 容 部 分 为 第 二 块 ， 页 脚 
部 分 为 第 三 块 。 而 在 中 间 内 容 部 分 块 里 ， 还 可 以 将 整个 内 容 部 分 再 细 分 为 两 个 小 块 ， 一 块 为 
标题 及 文字 信息 ， 一 块 为 链接 内 容 的 信息 。 


@ 固 定 宽度 且 布 满 整 块 版 式 ， 如 图 12-14 所 示 。 


图 12-14 上 机 题 1 第 一 块 示例 图 


棍 _ 
eg 这 一 块 的 图 片 宽度 为 整个 页 面容 器 的 宽度 ， 高 度 也 可 以 占 整 个 块 的 高 度 。 


Q@ 上 下 分 块 且 分 类 显示 版 式 ， 如 图 12-15 所 示 。 


国家 旅游 局 警示 : 禁 收 老年 游 附加 责 


划 老 年 人 、 青 少年 清 费 水 平 不 高 为 由 ， 向 60 岁 以 上 老年 人 和 18 岁 以 下 青少年 收取 附加 寓 成 为 能 游 业 “ 潜 规则 ” ,国家 旅游 局 质量 点 客 管 理 所 星 天 发 
布 的 今年 第 三 号 旅游 服务 警示 强调 ， 同 一 旅游 团队 中 ， 访 行 社 不 悍 折 于 旋 游 者 存在 的 年 疮 或 者 职业 上 的 差异 提出 附加 痢 用 ， 否 则 将 受到 处 罚 ， 

训 分 术 行 社 向 so 岁 以 上 老年 人 收 积 附加 赤 旅游 服务 警 地 坦 示 读 费 者 ,根据 《 族 行 社 条 例 实施 细则》 规定， 除 砷 放行 社 提供 了 与 其 好 访 游 者 相 比 更 儿 
的 服务 或 放淤 者 主动 要 求 ， 否则 同一 旋 游 团队 中 ,旅行 社 不 生 由 于 旅游 者 存在 的 年 疮 或 者 职 此 上 的 差异 ， 提出 与 其 他 旅游 者 不 局 的 合同 事项 ， 加 险 加 次 
用 等 ， 违 者 要 受到 处 河 


不 走 寻 党 路 海南 最 坦 悍 去 冒险 的 有 点 英 嫩 各 伯 皇 守 胜 利 号 半 进 “ 修 产 ” 
党 窗外 美景 探寻 宁夏 神 黎 宝塔 明 图 ) 哥伦比亚 军 见 的 地 下 盐 矿 孝 演 
旅行 中 升华 g 后 而 立 之 年 必 去 三 大 族 徐 地 走 进 奥 似乎 地 大 婚 之 地 眼 图 ) 
十 风 的 生动 物 嫩 观 扫 图 ) 
新 缮 件 葵 秘 入 七 行 “ 青 蛙 计 ” 
虹 虹 初夏 六 条 线路 品 出 这 南 的 六 种 区 村 盘 秘 千 纳 央 卡 文明 之 迹 图 ) 


图 12-15 上 机 题 1 第 二 块 示例 图 
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抱 。 可 以 先 将 整个 大 块 分 成 上 下 两 个 小 块 ， 第 一 决 显示 上 面 的 文字 信息 ， 下 面 的 一 块 再 分 为 左右 
| 国 下 两 个 小 块 ， 分 别 显示 相应 的 信息 ， 注 意 两 个 小 块 的 样式 不 同 ， 需 要 分 别 设置 ， 同 时 注意 决 与 
块 之 间 的 距离 。 


@ 宽 度 固 定 且 布 满 整 块 版 式 ， 如 图 12-16 所 示 。 
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图 12-16 ”上 机 题 1 第 三 块 示例 图 


要 这 一 块 只 需要 将 图 片 设置 成 为 宽度 占用 整个 一 块 即 可 ， 高 度 可 以 根据 需求 而 定 ， 再 设置 一 下 
{ 故 ”。 状 景 色 就 达到 要 求 的 效果 了 。 


(2) 请 使 用 DIV+CSS 排 版 完成 如 图 12-17 所 示 的 效果 。 


首页 绿茶 知识 所 茶 知识 茶具 知识 
降 脂 减肥 ， 防 止 心 府 血管 疾病 
降 腾 成 把 ,防止 心 脑 血管 科 病 ， ，《 神 农 本 草 》 一 书 早 在 二 千 多 年 前 已 提 
及 某 的 减肥 作用 : “入 服 安心 益 气 …… “区 身 不 老 ”。 现 代 科学 研究 及 恬 床 实 葵 证 实 ， 的 血 
脂 责 朋 固 醉 ， 今 身体 变 惕 至 及 ， 这 是 因 力 共 里 的 击 共 竺 生物 、 芳 大 益 物 质 、 乞 基 融 尖 物 质 给 
协调 的 结果 , 峙 别 是 共 多 顶 与 革 夫 和 好 生 素 C 的 洋 合 作用 ,能 詹 促 法 腾 肪 国 化 。 玫 助 滑 化 ， 降 及 呈 到 。 此 外 。 
茶 多 本 能 注解 脂肪 、 而 挫 和 束 则 可 促进 胆 回 队 排出 体外 。 归 茶 本 身 舍 某 甘 宁 ， 茶 甘 宁 是 提高 由 营 抽 性 的 ， 使 
血 各 不 容 号 破 采 。 
防 疗 
到 其 及 咖 星 丹 ， 阿 者 | 合作 月 ， 除 了 起 到 更 神 、 剧 神 乙 区 ,更 具备 提 而 
人 件 免疫 能 力 和 抗 廊 的 功效 ， 美国 化 学 协会 总 会 发 现 ， 茶 叶 不 外 对 消 ee 


。 经 过 科学 研究 确认 ， 茶 叶 中 的 有 遍 抗 浆 物 叶 主 要 有 茶 多 内 、 
人 中 、 日 科学 寄 认 为 ， 3 
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图 12-17 上 机 题 2 效果 图 


图 12-17 一 共 可 以 分 为 三 个 大 块 ， 第 一 大 块 为 上 面 的 标题 链接 ， 第 二 大 块 为 中 间 的 内 容 部 
分 ， 包括 文字 及 图 片 的 部 分 ， 第 三 大 块 为 下 面 的 版 权 部 分 。 


@ 宽 度 固定 、 带 背景 色 且 链接 文字 左 对 齐 版 式 ， 如 图 12-18 所 示 。 


首页 绿茶 知识 红茶 知识 茶具 知识 


图 12-18 ”上 机 题 2 第 一 块 示例 图 


所， 在 这 一 大 块 里 面 ， 可 以 先 设置 背景 色 ， 然 后 再 设置 链接 文字 的 样式 ， 就 可 以 实现 上 面 的 效 
| 畏 玉 。 果 ， 但 要 注意 文字 的 间距 。 
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@ 宽 度 固定 且 左 右 再 分 版 式 ， 如 图 12-19 所 示 。 


降 脂 减肥 ， 防 止 心 腐 血管 疾病 
降 腹 减 肥 ， 人生 忆 茶 与 减肥 的 关系 是 非常 密切 的 ，《 神 农 本 草 》 一 书 早 在 二 千 多 年 前 已 提 


茶 多 酚 能 溶解 脂肪 、 而 维生素 5 则 可 促进 胆固醇 排出 体外 。 绿 茶 本 身 合 茶 甘 林 ， 茶 甘 守 是 提高 血管 币 性 的 ， 使 
血管 不 容易 破裂. 


防 癌 
录 茶 所 合 的 成 分 一 一 一 茶 多 酚 有 咖啡碱， 两 者 所 产生 的 综合 作用 ,除了 起 到 提神 、 养 神 之 效 ,更 具备 提高 


和 维生素 了 庆 叶 中 的 天 机 搞 元 来 主要 有 三 ， 相 、 多 ， 拓 等 中 、 日 科学 家 认为 ， 茶 多 酚 中 的 儿 茶 素 抗 谢 效 
果 最 佳 。 


图 12-19 上 机 题 2 第 二 块 示例 图 


粮 ， ”可 以 将 这 一 大 块 分 成 左右 两 个 块 ， 左 边 的 一 块 放 上 文字 内 容 ， 右 边 的 一 块 再 分 成 上 下 两 个 小 
| 国 下 。 决 ， 在 每 块 里 面 分 别 放 上 需要 的 图 片 及 文字 即 可 。 这 样 大 块 的 布局 就 会 很 清晰 、 明 了 ， 并 且 
也 方便 以 后 的 维护 。 


四 宽度 固定 且 布 满 整 块 版 式 ， 如 图 12-20 所 示 。 
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图 12-20 ”上 机 题 2 第 三 块 示例 图 


查 _ 
| 国 亚 ”这 一 大 块 很 简单 ， 只 要 将 图 片 的 宽度 设置 为 与 此 块 一 样 的 宽度 就 可 以 实现 要 求 了 。 
(3) 请 使 用 DIV+CSS 完 成 如 图 12-21 所 示 的 效果 。 
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“电动 车 产业 发 展 规划 格 于 今年 下 半年 正式 出 台 

“广汽 传 祸 量 产 车 定 要 谋 照 上 汽 NG2 新 目录 编号 哩 光 
“宝马 发 布 新 3 细节 图 雪铁龙 0S3 格 搭载 1 .6T 发 动机 
“腾讯 汽车 试 新 赛欧 两 厢 荣威 首 款 SWY 仿 年 年 底 上 市 
“10 款 热 御 SUy 行 情 盘点 部 越 降 1.5 万 起 亚 HT0 降 1 万 
“图 吧 | 英 菲 尼 过 gxs6 预 售 150 万 起 jilae 超 领路 车 


“ 民 次 参 建 保障 房 只 并 大 得 四 种 装修 让 女人 倒 委 

“ 吕 际 生活 于 青山 绿 水 之 间 成 者 最 牛 二 手 别 竖 寻 买 家 
“轻轨 新 城 90 平 米 总 价 50 万 上 海 小 昆山 看 房 征集 中 
“农民 可 中 领 公 积 全 贷款 太原 房展 会 -明星 9 时 看 展 记 
“家 居 | 巧 用 纯色 制造 绚丽 空间 夏 日 窗 市 沁 凉 裤 间 
“装修 | 巧 用 装饰 打造 客厅 Ai 十 划 次 号, 让 家 鲜 活 起 来 


“发 疏 委 再 谈 农 产品 洲 价 称 楼 市 股市 游资 炒作 

“ 课 圳 经 济 特 区 将 向 外 扩展 关内 外 一 体 化 方案 已 获 批 
"媒体 称 上 海 房产 税 方案 已 上 报 中 央 还 天 过 三 道 坎 

" 上海 新 盘 大 幅 调 低 开盘 价 评 圳 悉 盘 首次 主动 降价 

“ 美 对 华 出 口 低 价 大 豆 超 2000 万 叶 加 工厂 受 冲 击 停工 


“法 癌 - 费 管 台 进 65 强 海宁 2-! 匣 娃 Fl 土耳其 站 -汉密尔顿 村 完 
“精英 赛 -女排 1-3 多 米 尼 加 于 主 泉 道 鞭 文 排 足 女 丘 同日 沦陷 
“ 斯 科 拉 承 庄 续 约 如 明 恢复 罕 合 预期 科比 : 湖人 已 做 好 准备 
“ 曝 皇 马 羽 是 称 里 尼 奥 次 先 狂人 向 接班 弗格森 国米 今夏 首 签 
“" 彩票- 双色球 6 红 5 侧 束 12 千 4 注 697 万 至 禾 -湖人 绿 衫 军 因 从 录 


"专栏 | 谢 作 诗 : 人 民 币 汇率 不 采 美 元 是 自己 犯 盆 


“专栏 | 马 管 兴 : 足协 领导 该 清醒 了 徐 载 : 商 瑞 华 和 何去何从 
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上 机 题 3 效 果 图 


在 这 一 题 中 ， 页 面 可 以 分 成 四 块 ， 块 与 块 之 间 的 间隔 、 标 题 的 背景 色 都 需要 注意 。 我 们 


可 以 先 将 整个 大 块 分 成 左右 两 块 ， 这 样 可 以 保证 上 下 相 邻 的 两 块 有 一 样 的 布 


局 。 然 后 


将 左 


右 的 两 个 大 块 再 分 成 上 下 两 个 小 块 ， 这 样 大 体 上 分 成 四 块 的 布局 。 但 是 ， 还 有 标题 的 部 分 需 


要 设置 ， 可 以 把 标题 和 内 容 部 分 再 分 成 两 个 小 块 ， 单 独 设置 标题 和 内 容 ， 就 可 以 实现 上 图 的 


效果 了 。 


外 左右 不 等 版 式 ， 如 图 12-22 所 示 。 


， 电 动车 产业 发 展 规划 格 于 今年 下 半年 正式 出 台 

"广汽 传 祝 量 产 车 定 依 译 骨 上 汽 Woz 新 目录 编号 唱 光 
， 宝马 发 布 新 x3 细节 图 四 忌 龙 DS3 格 搭载 1. 6T 发 动机 
， 膨 讯 汽车 试 新 赛 也 两 厢 荣威 首 半 SUWY 仿 年 年 愿 上 市 
"10 蒜 热 悄 SU 行情 盘点 朗 起 降 1 5 万 起 亚 RIO 降 1 万 
"EBP | 英菲尼迪 QX56 预 售 150 万 起 kulae 扫 纪 路 车 


， 民 资 参 建 保障 房 蛤 并 排 血 四 种 装修 让 女人 创 等 

“品味 生活 于 青山 妇 水 之 则 成 都 最 牛 二 手 别墅 寻 买 家 
“ 猎 雪 新 城 90 平 米 总 价 50 万 上 海 小 9 昆山 看 房 征 集中 
“农民 可 中 独 公 积 金 货款 大 原 房展 会 -明星 q 几 看 展 记 
“家 居 | 巧 用 纯色 制造 绚丽 空间 夏 日 家 市 沁 凉 空间 
“装修 | 巧 用 装饰 打造 客厅 Ai 十 划 沉 态 , 让 家 峡 活 起 来 


发改委 再 二 农产品 汪 价 称 楼 市 股市 游资 炒作 

， 羡 训 经 济 特区 格 向 外 扩展 关内 外 一 售 化 方案 已 臣 批 | 
“媒体 称 上 海 房产 税 方案 已 上 报 中 央 还 需 过 三 道 坎 

“， 上海 新 盘 大 幅 调 低 开盘 价 评 圳 翌 条 首次 主动 降价 

上 美 对 华 出 口 低 价 大 互相 z000 万 吨 加 工厂 受 冲击 停工 
专栏 | 谢 作 诗 : 人 民 币 汇率 不 盯 美 元 是 自己 犯 傻 


“ 法 网 - 费 德 勤 进 55 海 丁 2-1 藻 娃 Fi 土耳其 站 - 汉 寥 尔 顿 守 冠 
， 精 英 赛 -女排 1-3 多 米 尼 加 王 宝 遇 道 台 女排 女足 女 兵 同 日 沦陷 
， 斯 科 拉 承 诺 续 约 攀 明 恢复 茶 合 预期 科比 : 湖人 已 敌 好 准备 
“ 喝 皇 马 仅 是 煌 里 尼 奥 次 选 狂人 涂 接 班 弗 格林 国米 今夏 首 签 
“彩票 -双色 球 6 红 5 偶 牙 12 计 4 注 697 万 漂 米 -湖人 媒 禄 军 恩 仇 录 
“专栏 | 马 德 兴 : 足协 领导 该 清 前 了 从 观 : 商 瑞 华 何 去 何 从 


排版 布局 。 


12-22 ”上 机 题 3 第 一 次 分 块 示 示例 


| 先 将 整个 大 块 分 成 两 个 小 块 ， 注 意 左面 一 决 的 宽度 要 小 于 右面 一 决 的 宽度 。 这 样 便于 后 面 的 


Q@ 上 下 等 分 版 式 ， 如 图 12-23 所 示 。 
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HSS 市 司 全 汉 


"电动 车 产业 发 展 规划 格 于 今年 下 半年 正式 出 台 

“ 厂 污 传 祺 量 产 车 定 要 谋 照 上 污 %G2 新 目录 编号 曝光 
| 宝马 发 布 新 3 细节 图 委 妖 龙 S3 格 搭载 1. 67 发 动机 
"请 讯 汽车 试 新 赛 时 两 慎 荣威 首 款 SUY 今 年 年 底 上 市 
" 10 款 热 销 SU 行情 盘点 训 越 降 1 5 万 起 亚 RIO 降 1 万 
" 图 吧 | 英 菲 尼 过 9x56 预 售 150 万 起 Hulse 超 级 跑车 


”发改委 再 起 农产品 涨 价 称 楼 市 胶 市 游资 炒作 

评 吉 经济 特 区 格 向 外 扩展 关内 外 一 体 化 方案 已 获 批 
媒体 称 上 海 房产 税 方案 已 上 报 中 央 还 需 过 三 道 坎 

“上 海 新 条 大幅 调 低 开盘 价 评 基 | 杰 委 首次 主动 降价 

| 美 对 华 出 口 低 价 大 豆 超 2000 万 吨 加 工厂 受 冲 击 停工 
| 专栏 | 谢 作 诗 : 人 民 币 汇 率 不 盯 美 元 是 自己 疙 傻 


图 12-23 ”上 机 题 3 第 二 次 分 块 示例 图 


IE 先 将 第 一 个 大 块 分 成 上 下 两 个 等 高 的 小 块 ， 这 样 上 下 显示 的 内 容 就 可 以 对 齐 了 ; 然后 再 将 右 


面 的 一 大 块 也 同样 操作 。 
@ 上 下 不 等 分 版 式 ， 如 图 12-24 所 示 。 


“电动 车 产业 发 展 规 划 和 于 今年 下 半年 正式 出 台 
“三 汽 传 祸 量 产 车 定 要 谋 照 上 汽 WG2 新 目录 编号 曝光 
" 全 马 发 布 新 X3 细 节 图 雪铁龙 0S3 格 搭载 1. 67 发 动机 


" 蚌 讯 汽车 试 新 赛欧 两 必 荣威 首 款 SUY 今 年 年 底 上 市 
"10 款 热 销 SUy 行 情 盘点 部 越 降 1. 5 万 起 亚 RIO 降 1 万 
" 图 吧 | 英 菲 尼 这 QX56 预 售 150 万 起 Hulme 超级 跑车 


图 12-24 上 机 题 3 第 三 次 分 块 示例 图 


柳 。” ” 先 将 第 一 大 块 分 出 的 第 一 小 块 再 次 划分 为 两 个 小 块 ， 第 一 块 为 标题 部 分 ， 


同时 再 设置 背景 


| 国 于 。 色 ， 下 面 的 一 小 块根 据 要 求 显示 出 内 容 就 可 以 了 。 其 他 的 三 个 小 块 也 同样 操作 。 注 意 每 个 小 


块 之 间 的 间距 及 边框 的 厚度 。 


(4) 请 使 用 DIV+CSS 完 成 如 图 12-25 所 示 的 效果 。 


上 海 | 大 小 姐 关 颗 晒 私 家 衣 柱 世博 园 餐 馆 能 否 盈利 成 三 I 行业 重金 属 污染 球 三 角 动用 关系 抹 去 不 良 记录 

上 海 | 搜索 性 感 美 女 球 过 血泪 工厂 女 职 员 的 翡 懂 命运 全 崩 时 速 240 公 里 扑 向 猎物 (图 ) 埃及 现 3 千年 前 高 级 军官 天 
广东 | 广州 看 次 门诊 人 均 花费 193 元 具有 修复 功能 的 食物 最 大 电动 飞机 模型 辟 展 6 米 火星 北极 大 峡谷 形成 之 谜 揭 开 
广东 | 广州 人 喜欢 喝 的 下 火 汤 盐 烛 沙 著 鸡 广州 面食 专家 详解 人 类 首次 火星 模拟 试验 专题 : 爱 因 斯 坦 展览 中 国 开展 
宠物 | 扁 脸 胖 疾 京城 赶集 音乐 狂 打 擂 儿 狂 菊花 事件 后 续 环球 地 理 | 眼镜 蛇 对 决 巨 蜥 虚拟 世界 重 现 庞 贝 古城 

美食 | 白云 猪手 做 法 详解 10 分 钟 室 客 荣 实 拍 城 隐 店 小 吃 一 周 太空 图 片 精 选 : 太阳 表面 现 暗 条 似 疤 疯 图 ) 


图 12-25 上 机 题 4 效果 图 


上 面 的 效果 图 很 明显 地 使 用 了 左 中 右 不 等 版 式 ， 所 以 这 一 题 只 需要 使 用 


完成 。 左 中 右 不 等 版 式 的 分 块 ， 如 图 12-26 所 示 。 


这 一 种 版 式 即 可 
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上 海 | 搜索 性 感 美女 球 过 血泪 工厂 女 职员 的 翡 惨 命 运 
广东 | 广州 看 次 门诊 人 均 花 章 193 元 具有 修复 功能 的 食物 
广东 | 广州 人 喜欢 喝 的 下 火 汤 盐 烛 神 妆 鸡 广州 面食 专家 


宠物 | 扁 答 笠 狂 京城 土 集 音乐 狂 打 擂 猪 狂 东 花 事 件 后 续 
美食 | 白云 猪手 做 法 详解 10 分 钟 宴 客 菜 实 拍 城 隆 庙 小 吃 


人 IEDIV+CSSmmrnsna ER 


“| 二 行 上 年 宇 尾 污 染 穆 三 角 动用 关系 苯 去 不 良 记录 


例 表 时 过 240 公 里 站 向 猪 物 图 ) 埃及 现 3 千 年 前 高 级 军官 吾 
最 大 电动 飞机 模型 均 展 6 米 火星 北极 大 峡谷 形成 之 迹 揭 开 
详解 人 类 首次 火星 模拟 试验 专题 : 爱 因 斯 坦 展览 中 国 开展 
环球 地 理 眼镜蛇 对 决 巨 蜥 虚拟 世界 重 现 底 贝 古城 

一 周 太空 图 片 精 选 : 太阳 表面 现 暗 条 似 疤痕 (图) 


图 12-26 ”上 机 题 4 分 块 示例 


四 


先 将 整个 页 面 分 成 三 个 小 块 ， 然 后 再 把 第 一 块 与 第 三 块 的 背景 色 加 上 ， 然 后 还 要 将 第 一 块 设 
| 苓 下。 轩 成 为 左 对 齐 ， 右 边 的 一 块 设置 为 右 对 齐 ， 中 间 的 一 块 设置 为 居中 即 可 。 注 意 ， 前 两 块 的 文 
字 部 分 都 要 左 对 齐 ， 最 后 面 的 一 块 的 图 片 与 文字 都 要 居中 对 齐 。 


(5) 请 使 用 DIV+CSS 完 成 如 图 12-27 所 示 的 效果 。 


图 12-27 上 机 题 5 效果 图 


从 图 中 可 以 看 出 ， 整 个 内 容 部 分 需要 分 成 为 由 上 到 下 排列 的 四 个 小 块 ， 每 个 块 之 间 的 空 
隙 要 相等 ， 然 后 再 将 每 一 个 小 块 再 分 成 左 中 右 三 个 等 分 的 小 块 即 可 。 


@ 上 下 等 分 版 式 ， 如 图 12-28 所 示 。 


的 _ 
Le 


第 12 章 ”DIV+CSS 布 局 综述 


图 12-28 上 机 题 5 第 一 次 分 块 示例 图 


在 此 处 ， 只 需要 将 整个 内 容 部 分 分 成 上 下 四 个 相等 的 小 块 ， 这 样 就 可 以 实现 四 行 的 效果 。 


@ 左 中 右 相等 版 式 ， 如 图 12-29 所 示 。 


棍 _ 
| 国 ™ 


图 12-29 上 机 题 5 第 二 次 分 块 示例 图 


再 将 每 一 小 块 再 次 分 成 为 左 中 右 三 个 相等 的 小 块 。 分 的 时 候 需 要 注意 位 置 ， 左 面 的 小 块 左 对 
齐 ， 右面 的 小 块 右 对 齐 ， 中 间 的 小 块 要 居中 对 齐 。 这 样 就 把 整个 的 一 个 大 块 分 成 了 若干 个 小 
块 ， 这 几 个 小 块 的 样式 都 是 一 样 的 ， 所 以 只 要 设计 一 个 小 块 的 样式 就 可 以 了 ， 其 他 小 块 全 部 
使 用 这 一 个 样式 就 能 实现 要 求 的 效果 了 。 
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CSS、XML 和 Ajax ec 


综合 使 用 方式 


CSS 虽 然 能 很 有 效 地 定义 页 面 上 的 各 种 样式 ， 但 它 毕竟 属于 静态 的 ,在 
创建 动态 效果 方面 ， 它 最 多 只 能 通过 hover 这 类 伪 对 象 来 实现 鼠标 效果 。 

在 第 11 章 讲述 了 用 JavaScript 实 现 一 些 动态 效果 ， 本 章 将 用 XML 和 
Ajax 实现 一 些 “ 富 客户 端 ”的 样式 。 在 本 章 中 ， 我 们 将 讲述 的 重点 内 容 如 
下 。 


XML 知识 点 概述 

在 XML 里 调用 CSS 的 方法 
通过 CSS 美 化 XML 页 面 的 方式 
Ajax 概述 
Ajax 与 CSS 的 应 用 实例 


13:1 ”XML 基础 


XML 是 HTML 的 替代 物 ， 由 于 它 具 有 HTML 无 法 具备 的 优势 ， 所 以 在 不 远 的 将 来 ， 网 页 
文件 的 格式 或 许 是 XML 而 不 是 HTML。 目 前 ，XHTML 这 个 XML 和 HTML 之 间 的 过 渡 语 言 得 
到 很 大 的 发 展 ， 就 能 充分 说 明 这 个 趋势 。 

本 节 主 要 学 习 XML 相 关 知 识 ， 我 们 将 重点 介绍 XML 的 基础 知识 ， 并 在 下 一 节 中 介绍 
XML 与 CSS 在 一 起 的 简单 使 用 方法 。 


《ES XML 的 特点 


XML (Extensible Markup Language) 即 可 扩展 标记 语言 ， 它 与 HTML 一 样 ， 都 是 符合 
SGML (Standard Generalized Markup Language， 标 准 通用 标记 语言 ) 标准 的 语言 。 

XML 是 mtermet 环 境 中 跨 平台 的 、 依 赖 于 内 容 的 技术 ， 是 当前 处 理 结构 化 文档 信息 的 有 力 
工具 ， 虽 然 XML 数 据 占用 的 空间 比 二 进 制 数 据 要 占用 更 多 的 空间 ， 但 XML 极其 简单 易于 掌握 
和 使 用 。XML 语 言 有 如 下 的 特点 。 


Q@XML 是 一 种 元 标记 语言 ， 所 谓 元 标记 ， 就 是 开发 者 可 以 根据 自己 的 需要 定义 符合 自己 
需求 的 标记 。 在 这 种 元 标记 的 语言 里 ， 任 何 满足 XML 命 名 规则 的 名 称 都 可 以 作为 标记 ， 这 样 


ee 


我 们 就 能 
等 已 经 定义 的 标签 ， 


第 13 章 “CSS、XML 和 Ajax 综合 使 用 方式 


不 能 识别 对 于 用 户 自己 定义 的 标记 。 


XML 定义 不 同 种 类 型 的 网 页 ， 而 HIML 是 一 种 预定 义 标记 语言 ， 它 只 认识 <html> 


@XML 是 一 种 严格 的 语义 结构 化 语言 ， 它 描述 了 文档 的 结构 和 语义 。 


比如 ， 在 HIML 语言 


类 


OAAMRODEP 


本 
2 
35 
4. 
5 
6 


<p> 


book name 
</p> 
<ul> 

<1i>author name 
<1i>publisher name 
<1i>isbn number 
</ul> 


使 


<title>book name</title> 

<author>authorname</author> 
<publisher>publisher name</publisher> 
<isbn>isbn number</isbn> 


. </book> 


了 多 种 HTML 的 标签 来 定义 书 的 属性 ， 而 召 


。 <book> 


旺 ， 要 描述 一 本 书 ， 可 以 如 下 表示 : 


EXMIL 


ph， 同样 的 数据 可 以 表示 为 : 


从 上 述 代 码 中 可 以 看 出 ，XML 是 有 明确 语义 ， 并 且 是 语言 结构 化 的 ， 所 以 XML 是 一 种 简 


单纯 文本 的 数据 格式 。 
@XML 语 言 可 用 于 数据 交换 ， 这 主要 是 因为 ，XML 表 示 的 信息 独立 于 操作 平台 ， 这 里 的 


在 不 同 的 数据 库 
@XMI 文 档 


示 一 个 <book> 标 记 4 


人 台 即 可 以 理解 为 不 同 的 应 用 程序 ， 也 可 以 理解 为 不 同 
过 XML， 我 们 可 以 在 微软 公司 的 Word 程 序 和 Adobe 公 司 
(比如 Access 和 Sql Server) 之 间 交 换 数 据 信息 。 


虫草 隐 禾 XML 的 结构 和 基本 语法 
XML 对 于 语法 有 着 严格 的 规定 ， 只 有 当 一 个 XML 文 档 符合 “格式 良好 ”的 基本 要 求 时 ， 


才能 被 XML 处 理 程序 分 析 和 处 理 。 在 一 个 XML 文档 


1. XML 声明 


XML 声 


个 完整 的 XML 声明 的 例子 。 


<?XML version = "1.0" encoding = "GB2312" standalone = "no"?> 


中 ， 


“<? ”代表 一 条 指令 的 开始 ， 


包含 如 下 的 要 素 。 


的 操作 系统 ， 它 描述 了 一 种 规范 ， 通 
的 Acrobat 程 序 之 间 交 换 信息 ， 也 可 以 


DTD 和 XML 两 部 分 文本 组 成 ， 所 谓 DTD (Document Type Deftination) ， 简 
单 的 说 就 是 一 组 标识 符 的 语法 规则 ， 表 明 XML 文 本 是 怎样 组 成 的 ， 比 如 通过 DID 程序 可 以 表 
必须 有 一 个 子 标 记 <author>， 或 者 可 以 表示 一 定 要 有 标记 <page> 等 ，DTD 


可 以 理解 成 是 XML 程序 的 “说 明文 档 ”， 当 然 ， 一 个 简单 的 XML 文本 可 以 没有 DID。 


月 是 处 理 指 令 的 一 种 。 一 个 XML 文档 最 好 以 一 个 XML 声明 作为 开始 。 下 面 是 一 


“> ”代表 一 条 指令 的 结束 ，“XML” 代表 此 文件 
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是 XML 文件 ，“ version="1.0" ”代表 此 文件 用 的 是 XML1.0 标 准 。“ encoding="GB2312" ” 
代表 此 文件 所 用 的 字符 集 ， 如 果 不 定 义 ， 默 认 值 为 Unicode， 如 果 该 文件 中 要 用 到 中 文 ， 就 必 
须 将 此 值 设 定 为 GB2312。 


2 主 
8 意 ”XML 声明 必须 出 现在 文档 的 第 一 行 。 


全 元素 

元 素 是 XML 文档 内 容 的 基本 单元 。 从 语法 上 讲 ， 一 个 元 素 包 含 一 个 起 始 标 记 、 一 个 结束 
标记 以 及 标记 之 间 的 数据 内 容 ，XML 中 元 素 的 样式 如 下 : 

< 标记 > 数据 内 容 </ 标 记 > 

对 于 元 素 与 标记 ， 在 XML 里 有 如 下 的 语法 规定 。 


名 标记 必 不 可 少 。 任 何 一 个 格式 良好 的 XML 文档 中 至 少 要 有 一 个 元 素 。 

@ 大 小 写 是 有 差别 的 ， 例 如 <Home> 与 <home> 不 是 一 个 标记 。 

@ 要 有 正确 的 结束 标记 。 结 束 标记 除了 要 和 起 始 标 记 在 拼写 和 大 小 写 上 完全 相同 ， 还 必 
须 在 前 面 加 上 一 个 斜 杠 “/”; 当 一 对 标记 之 间 没 有 任何 文本 内 容 时 ， 可 以 不 写 结束 标记 ， 而 
在 起 始 标 记 的 最 后 冠 以 斜 杠 “/” 来 确认 ， 这 样 的 标记 称 为 “ 空 标记 ”。 

四 标记 要 正确 肉 套 ， 只 有 最 外 层 的 标记 不 被 其 他 标记 所 嵌 套 。 

回 标记 命名 要 合法 。 标 记名 应 该 以 字母 、 下 划 线 “_” 或 冒号 “:” 开 头 ， 后 面 跟 字 母 、 
数字 、 句 号 “.”、 冒 号 、 下 划 线 或 连 字符 “-”， 但 是 中 间 不 能 有 空格 ， 而 且 任 何 标 记名 不 
能 以 “XML” (或 者 “XML” 大 小 写 的 任何 组 合 ， 如 “xml”、“Xml”、“XMIl” 等 等 ) 
起 始 。 

@@ 要 正确 有 效 地 使 用 属性 。 标 记 中 可 以 包含 任意 多 个 属性 ， 属 性 以 名 称 加 上 属性 值 成 对 
出 现 ， 属 性 名 称 不 能 重复 ， 名 称 与 属性 值 之 间 用 等 号 “=” 分 隔 ， 且 属性 值 用 引号 引起 来 。 


3. CDATA 节 


在 标记 CDAIA 下 ， 所 有 的 标记 、 实 体 引 用 都 被 忽略 ， 而 被 XML 处 理 程序 一 视 同 仁 地 当 
作 字 符 数据 看 待 。CDAIA 的 形式 如 下 ; 


<![CDATA[ 文本 内 容 ]] > 

CDATA 的 文本 内 容 中 不 能 出 现 字符 串 “]]>”， 另 外 ，CDATA 不 能 榜 套 使 用 。 

4. 注释 

有 些 时 候 ， 人 们 希望 在 XML 文档 中 加 入 一 些 用 作 解 释 的 字符 数据 ， 并 且 希 望 XML 处理 器 
不 对 它们 进行 任何 处 理 ， 这 种 类 型 的 文本 称 作 注 释 《COMMENT) 文本 ， 在 XML 中 ， 注 释 的 
方法 与 HTML 完 全 相同 ， 用 “<! --” 和 “-->” 将 注释 文本 引起 来 。 对 于 注释 还 有 以 下 规定 。 

中 在 注释 文本 中 不 能 出 现 字 符 “-” 或 字符 串 “--”。 

@ 不 要 把 注释 文本 放 在 标记 之 中 ， 类 似 地 ， 不 要 把 注释 文本 放 在 实体 声明 之 中 或 之 前 。 

@@ 注 释 不 能 被 嵌 套 。 
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下 


团 


我 们 来 看 一 个 学 生 信 息 的 XML 文 档 ， 这 个 文件 可 以 命名 为 student.xml。 


1. <?XML version="1.0" encoding="GB2312" standalone="no"?> 
2 <?XML-stylesheet type="text/Xs1" href="mystyle.xsl"?> 
3 < 二 个 XML 用 例 对 > 

4. < 学 生 > 

5. < 学 号 >001</ 学 号 > 

6. ”< 姓名 > 张 三 </ 姓 名 > 

7. ”< 性 别 > 男 </ 性 别 > 

8. ”< 成 绩 >100</ 成 绩 > 

9. </ 学 生 > 


其 中 ， 第 1 行 定义 了 针对 这 个 XML 的 声明 ， 通 过 version 定 义 了 这 个 XML 的 版 本 ， 通 过 
encoding 定 义 了 这 个 XML 文件 里 的 编码 方式 。 

第 3 行 定 义 了 一 段 注 释 。 第 4 行 通过 < 学 生 > 定义 了 元 素 。 第 5 到 第 8 行 在 < 学 生 > 元 素 里 典 套 
定义 了 < 学 号 >、< 姓 名 >、< 性 别 > 和 < 成 绩 > 四 个 子 元 素 。 从 中 ， 可 以 看 到 XML 里 的 “标记 正 

除了 刚才 讲述 的 一 些 XML 的 一 些 基 本 语法 之 外 ， 在 XML 语法 里 ， 还 包含 了 如 下 的 规则 。 

@ 所 有 XML 元 素 都 必须 关闭 标签 。 

@XML 必须 正确 地 嵌 套 。 

比如 ， 在 HIML 中 ， 常 会 看 到 没有 正确 嵌 套 的 元 素 : 

<b><i>This text is bold and italic</b></i> 

在 XML 中 ， 所 有 元 素 都 必须 彼此 正确 地 嵌 套 : 

<b><i>This text is bold and italic</i></b> 


@XML 文档 必须 有 根 元 素 。XML 文 档 必 须 有 一 个 元 素 是 所 有 其 他 元 素 的 父 元 素 ， 该 元 
素 称 为 根 元 素 ， 比 如 下 面 的 代码 中 ， 第 1 行 的 root 就 是 根 元 素 ， 其 他 所 有 的 元 素 都 是 包含 在 这 


个 根 元 素 里 的 。 
OE 
2 <child> 
Ss <sibehild>. </subchild> 
4 </child> 
5. </root> 


@XML 的 属性 值 须 加 引号 。 


13.2 。 XML 与 CSS 的 综合 应 用 


CSS 能 作用 到 HTML 文 件 上 ， 同 样 也 能 作用 到 XML 文 档 上 ， 我 们 可 以 采用 在 HTMI 文 件 
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中 定义 样式 的 方法 ， 在 XML 文档 里 通过 CSS 来 规范 网 页 的 样式 。 


在 XML 里 链接 CSS 文 件 


我 们 可 以 采用 与 HIML 文 件 里 定义 样式 的 方法 ， 在 XML 文档 里 链接 CSS 文 件 ， 链 接 的 语 
法 如 下 : 


距 。 
素 ， 


<?XML-stylesheet type="text/css" href="XML-1.css"?> 


其 中 ， 通 过 type 说 明 引 入 文档 的 类 型 ， 通 过 href 属 性 说 明 要 引入 的 CSS 文 件 。 
下 面 来 看 一 个 例子 ， 首 先 编写 内 容 如 下 所 示 的 XML 文 档 ， 这 个 文档 命名 为 XML01. 
XML 。 


<?XML version="1.0" encoding="utf-8"?> 
<?XML-stylesheet type="text/css" href="XML-1.css"?> 
<XML> 
<book> 
<name>XML 应 用 系列 </name> 
<author> 学 路 的 小 孩 </author> 
<date>2009-03-23</date> 
</book> 
。 </XML> 


OOFAMrODr 


在 上 面 代码 的 第 2 行 中 ， 引 入 了 XML-1.css 这 个 文件 ， 在 第 3 行 <XML> 这 个 根 元 素 里 ， 引 
入 了 book 等 信息 。 在 这 个 文件 引用 的 XML-1.css 文 件 ， 其 代码 如 下 所 示 。 


book{ 
display:block; 
background-color:#0099CC7 
margin-top: 5px; 

} 

date{ 
display:block; 
line-height:30px; 


ov auwm 必 wm 


SS 

10. authort{ 

了 display:block; 

了 2 line-height:30px; 
3 

14. name{ 

15. display:block; 

16. line-height:30px; 
de 


这 里 定义 了 许多 样式 ， 第 1 行 定义 了 针对 book 元 素 的 样式 ， 包 括 背 景色 和 项 部 的 外 边 
第 6 行 设置 了 针对 date 元 素 的 样式 。 第 10 和 第 14 行 ， 分 别针 对 XML 里 的 author 和 name 元 


定义 了 相应 的 CSS 样 式 。 
此 可 以 看 到 ， 如 果 要 用 CSS 装 饰 XML 文档 ， 需 要 在 XML 文件 号 


有 用 href 引 入 CSS 文 件 ， 


而 后 可 以 在 CSS 文 件 里 ， 为 XML 中 的 每 个 元 素 定 义 样式 ， 这 种 做 法 与 在 HTML 里 引入 CSS 的 
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做 法 非常 相似 。 


PO 


上 


图 13-1 展 示 了 运行 XML01.XML 文件 的 效果 。 


背景 是 蔓 色 


图 13-1 XML01.XML 的 运行 效果 


在 CSS 文 件 的 第 3 行 ， 通 过 background-color 属 性 设置 了 针对 book 的 背景 色 ， 在 页 面 上 
可 以 看 到 XML 文件 的 背景 是 蓝 色 的 ， 而 且 ， 由 于 设置 了 行 高 是 30px， 所 以 这 里 的 3 行文 字 之 
间 的 间距 比 常规 的 要 大 很 多 。 

通过 一 个 简单 的 例子 来 说 明 XML 中 链接 CSS 文 件 的 方法 ， 事 实 上 ，HTML 页 面 上 通 


CSS 实 现 的 诸多 美观 效果 ， 都 能 通过 类 似 的 方法 ， 迁 移 到 XML 文件 上 。 


人 到 玖 通过 XML 和 CSS， 搭 建 具有 图 文 并 茂 效 果 的 案例 


在 上 一 小 节 中 ， 讲 述 了 在 XML 文件 里 引用 CSS 的 方法 ， 在 XML 中 ， 可 以 像 在 HTML 里 一 
样 通过 CSS 代 码 实 现 各 种 样式 。 可 以 这 样 说 ，CSS 在 HIML 页 面 上 能 达到 什么 效果 ， 那 么 CSS 


在 XML 文 件 旦 


eB 也 能 


能 实现 那样 的 效果 。 


下 面 来 看 一 个 XML 和 CSS 配 合 ， 搭 建 具有 图 文 并 茂 效 果 的 案例 。 案 例 的 效果 如 图 13-2 所 


不 


， 页 


上 放置 一 张 背景 图 ， 在 这 张 背景 图 之 上 ， 需 要 以 各 种 格式 放置 一 首 唐诗 。 


图 13-2 ”用 XML 和 CSS 实 现 图 文 并 茂 的 效果 


可 以 通过 HIMIL 来 实现 这 个 效果 ， 不 过 用 XML 实现 更 为 方便 ， 首 先 用 XML 文件 定义 整个 


二 
9 
3 


面 的 框架 ,代码 如 下 所 示 。 


<?XML version="1.0" encoding="utf-8"?> 


<?XML-S 
<poem> 


tylesheet type="text/css" href="XML04.css"?> 


| 
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<title> 九 日 </title> 
<author> 唐 杜甫 </author> 
<wen> 


重阳 独 酌 杯 中 酒 ， 抱 病 起 登 江 上 台 。 


BE 


竹 叶 于 人 既 无 分 ， 菊 花 从 此 不 须 开 。 
BEY> 
殊 方 日 落 玄 猿 哭 ， 旧 国 霜 前 白 雁 来 。 
<br /> 


弟妹 萧条 各 何在 ， 干 戈 衰 谢 两 相 催 ! 


</wen> 


15. </poem> 


这 里 通过 第 2 行 的 href 引 入 XML04.css 文 件 ， 从 第 3 行 开始 ， 通 过 poem、title 等 标签 来 定义 


诗 的 内 容 。 


需要 说 明 的 是 ， 由 于 使 用 了 XML 文 档 ， 所 以 第 8、 第 10 和 第 12 行 的 <br> 不 能 像 在 HTML 
里 那样 实现 换行 的 效果 ， 这 里 需要 为 br 定义 CSS 样 式 ， 才 能 实现 诗词 里 各 句 的 换行 效果 。 
在 XML 文件 中 没 法 定义 唐诗 的 显示 样式 ， 这 部 分 的 样式 定义 在 XML04.css 文 件 中 ， 其 代 


码 如 下 所 示 。 
1. Poem{ 
之 margin:0px; 
) width:300px; 
4. height:400px; 
position:absolute; 
6 background-image:url(001.jpg); /* 定 义 背 景 图 */ 
left:0px; 
有 top:0px; 
} 
10. titlet{ 
Wl font-size:16px; 
EC Color:#FFF; 
SR position:absolute; 
证 left:140px; 
5 top:20px; 
Se font-weight:800; 
LT } 
18. authort{ 
os font-size:14px; 
20. Color:#0033FF; 
v2 position:absolute; 
2 left:160px; 
2 top:50px; 
24. 和 
25. went{ 
6 position:absolute; 
7 color:#000; 
28 . font-size:14px; 
2 left:45px; 
30 top:70pzx; 
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< line-height:20px; 
2 font-weight:800; 
33s } 

34. br{ 

352 display:block; 


35- } 
从 中 可 以 看 到 ， 针 对 XML 里 的 元 素 定义 了 一 些 样式 ， 比 如 在 第 1 到 第 9 行 里 ， 定 义 了 针对 
poem 的 样式 。 第 6 行 通过 background-img:url 定 义 了 整个 唐诗 的 背景 色 。 在 第 10 到 第 17 行 的 title 
里 ， 定 义 了 针对 标题 的 样式 ， 比 如 定义 了 标题 的 字体 大 小 是 16px， 定 义 了 标题 文字 的 颜色 是 
#FFF。 
特别 注意 一 下 从 第 34 到 第 36 行 的 br 样式 ， 它 通过 设置 display:block 语 句 ， 实 现 了 换行 。 


斑 ”在 网 页 上 解析 XMIL 文 档 时 ， 诸 如 br 这 类 在 HTML 语 言 下 能 自动 实现 换行 效果 的 元 素 ， 未 必 能 
已 总。 得 到 所 有 浏览 器 的 支持 ， 所 以 ， 为 XML 编 写 CSS 的 时 候 ， 不 能 想当然 地 利用 HTML 语 法 下 的 
元 素 。 所 有 在 XML 里 定义 的 样式 ， 都 需要 在 CSS 里 实现 。 


上 面 代码 中 ， 针 对 其 他 元 素 定义 的 CSS 样 式 就 不 再 一 一 分 析 了 ， 总 之 ， 通 过 CSS， 可 以 


像 在 HTML 里 一 样 引 入 装饰 性 代码 ， 从 而 让 XML 文件 具有 各 种 风格 ， 开 发 完成 后 ， 用 正 等 济 
览 器 打开 上 述 XML 程序 ， 就 能 看 到 图 13-2 所 示 的 效果 。 


13.3 Ajax 与 CSS 的 综合 应 用 


“局 部 刷新 ”对 用 户 来 说 是 一 种 非常 舒适 的 体验 ， 就 像 谷 歌 地 图 一 样 ， 不 管 如 何 拖 动 
地 图 ， 都 只 是 地 图 的 一 小 部 分 在 刷新 ， 而 整个 页 面 不 会 刷新 ， 这 样 的 话 用 户 就 不 会 感到 页 
面 很 卡 。 

我 们 可 以 通过 Ajax 来 实现 针对 页 面 的 局 部 刷新 的 效果 ， 而 在 Ajax 和 CSS 综 合 应 用 下 ， 可 
义 通过 Ajax 来 局 部 刷新 某 部 分 的 CSS 的 样式 〈 而 不 需要 刷新 网 页 里 的 所 有 CSS 样 式 ) ， 从 而 
实现 对 页 面 样式 的 局 部 更 改 。 

本 节 讲 述 一 下 Ajax 和 CSS 两 者 的 关系 以 及 两 者 相互 配合 的 应 用 方法 。 


本 天 Ajax 概述 


Ajax 全 称 为 “asynchronous JavaScript and xml” (异步 JavaScript 和 xml) ， 是 一 种 创建 交 
互 式 网 页 应 用 的 网 页 开发 技术 。 
Ajax 并 不 是 一 门 新 的 语言 或 技术 ， 它 实际 上 是 几 项 技术 按 一 定 的 方式 组 合 在 一 起 协作 发 
挥 各 自 的 作用 ， 说 穿 了 它 仅仅 是 一 种 模式 ， 虽 然 它 以 JS 为 主 ， 但 它 是 针对 服务 端 技术 而 产生 
的 ， 包 含 了 使 用 XHTML 和 CSS 的 内 容 。 

使 用 DOM 实 现 动 态 显示 和 交互 ， 使 用 XML 和 XSLT 进 行 数据 交换 与 处 理 ， 使 
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XMLHttpRequest 进 行 异 步 数据 读 取 ， 最 后 用 JavaScript 绑 定 和 处 理 所 有 数据 。 事 实 上 ， 所 谓 的 
Ajax 其 核心 只 有 JavaScript、XMLHttpRequest 和 DOM， 但 恰恰 是 利用 这 些 技 术 ， 能 做 出 很 精 
美的 页 面 效 果 。 


仿 玛丽 Ajax 与 CSS 的 综合 应 用 


在 一 个 网 站 中 ，Ajax 还 可 以 与 CSS 样 式 一 同 使 用 ， 其 中 Ajax 负责 网 站 的 动态 效果 及 一 些 
互动 的 操作 ; 而 CSS 负 责 网 站 的 样式 设置 。 这 两 种 技术 在 一 起 使 用 ， 会 使 网 站 在 更 具有 互动 
性 的 同时 ， 还 会 有 完美 的 外 观 样式 。 

在 本 小 节 中 ， 我 们 将 用 Ajax 的 局 部 刷新 特性 ， 完 成 对 表格 样式 的 局 部 更 改 。 

下 面 我 们 来 看 一 个 Ajax 与 CSS 综 合 应 用 的 示例 ， 通 过 它 学 习 一 下 Ajax 与 CSS 是 如 何在 一 起 
使 用 的 ， 从 而 使 页 面 更 加 美观 。 

示例 的 效果 如 图 13-3 所 示 ， 当 用 户 单 击 任何 一 列 的 时 候 ， 那 一 列 内 容 部 分 的 背景 会 变 成 
草绿 色 ， 而 鼠标 移动 到 任何 列 时 ， 那 一 列 的 背景 色 会 变 成 淡 绿 色 ， 但 移动 到 被 单 击 的 列 时 ， 
不 会 有 任何 变化 。 

这 里 可 以 使 用 Ajax 的 局 部 刷新 效果 ， 局 部 更 改 某 一 列 〈 而 不 是 全 部 ) 的 背景 色 样式 。 


AJAX+CSS 修 饰 表格 属性 

编号 姓名 地 址 电话 

1 上 海 市 021-58505245 
2 广州 市 020-88833388 
3 南京 市 025-66666666 
4 E22 010.86245831 


图 13-3 Ajax 与 CSS 综 合 应 用 示例 题 


请 注意 ， 上 图 中 的 所 有 样式 都 是 由 CSS 来 完成 的 ， 下 面 分 析 一 下 这 个 效果 是 怎么 实现 的 。 
第 一 步 ， 设 计 HIML 代 码 如 下 所 示 。 


1. <html xmlns="http://www.w3.0org/1999/xhtml"> 

2. <head> 

3. <title>AJAX+CSS 修 饰 表格 属性 </title> 

4. <linkhref="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" 
media="screen" /> 

5. <script type="text/Javascript" src="tablecloth/tablecloth.js"></script> 

6. </head> 

8 


. <body> 
. <divid="container"> 
9. <h1>AJAX+CSS 修 饰 表格 属性 </h1> 
10. <div id="content"> 
ys <table cellspacing="0" cellpadding="0"> 
2 <tr> 
Ts <th> 编 号 </th> 
a <th> 姓 名 </th> 
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<th> 地 址 </th> 

16. <th> 电 话 </th> 

7 </tr> 

Te ES 

9 <td>1</td> 

202 <td> 张 三 </td> 

2 <td> 上 海 市 </td> 

2 2 <td>021-58505245</td> 
235 /EE> 

24. <tr> 

25 <td>2</td> 

26. <td> 李 四 </td> 

2 <td> 广 州 市 </td> 

28 . <td>020-88833388</td> 
29. EPE> 

30. Ee 

3 <td>3</td> 

本 2 <td> 王 五 </td> 

33 <td> 南 京 市 </td> 

34. <td>025-66666666</td> 
a5 EES 

36. SEr> 

BT: <td>4</td> 

38. <td> 赵 六 </td> 

39. <td> 北 京 市 </td> 

40. <td>010-86245831</td> 
4 </tr> 

42. </table> 

A </div> 

44. </div> 

45. </body> 


46. </html>> 


在 上 面 代码 中 ， 第 3 行 显 示 的 是 表 头 部 分 的 内 容 ， 第 4 行 代码 引用 外 部 CSS 文 件 的 代码 ， 
第 5 行 是 引 ee 第 8 行 到 第 45 行 就 是 页 面 内 容 部 分 了 。 
第 8 行 与 第 15 行 是 一 个 大 的 DIV 块 ， 在 这 个 块 里 面包 含 了 所 有 的 页 面 内 容 部 分 。 第 9 行 显 
示 了 一 段 文字 ， 这 里 使 说 明 这 段 文字 使 用 <h1> 标 签 的 样式 。 第 11 行 到 第 44 行 


是 一 组 表格 标签 ， 它 一 共有 5 行 ， 第 一 行 是 标题 部 分 ， 下 面 有 四 行 的 内 容 。 
第 二 步 ， ee 页 面 的 ss 样式， 代码 如 下 所 示 。 
1. tablef{ 
2. width:100%;border-collapse:collapse;margin:1em0; 
3. } 
a4. th, tadf 
5. text-align:left;padding:.5em;border:1px solid #fff; 
6. 1} 
Te Ch 
8. background:#328aa4 Url (tr back.gif) repeat-x;color:#fff; 
Sa 


10. ta 
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11. background:#e5f1lf4; 


了 2 

13. a:hovert{ 

a text-decoration:none; 
5- color:#999; 

en 

Shh 

18. font-size:140%; 

9 margin:0 20px; 

20. line-height:80px; 

4 

22. #container{ 

3 margin:0 auto; 

24. width:680px; 

2 background:#fff; 

26. padding-bottom:20px; 
1 


28 . #content{ 

29. margin:0 20px; 

3 

31. td.over, tr.even td.over, tr.odd td.overt{ 
32. background:#ecfbd4; 

< 

34. td.down, tr.even td.down, tr.odd td.down{ 
35. background:#bce774;color:#fff; 

0 


在 上 面 的 CSS 代 码 中 ， 第 1 行 到 第 3 行 设置 了 表格 的 一 些 样 式 ， 如 表格 的 宽度 等 。 第 4 行 到 
第 6 行 设置 了 表 头 里 的 每 个 单元 格 的 样式 。 第 7 行 到 第 9 行 设置 了 整个 表 头 部 分 的 样式 。 第 10 
行 到 第 12 行 设置 了 所 有 表格 的 单元 格 的 样式 ， 这 里 只 设置 了 背景 色 。 

第 13 行 到 第 16 行 用 到 了 伪 类 ， 实 现 鼠 标 滑 动 的 效果 ， 这 里 定义 了 当 鼠 标 移动 到 表格 内 容 
时 ， 背 景色 变 成 淡 绿 色 的 效果 。 第 17 行 到 第 21 行 设置 了 页 面 中 所 显示 的 文字 的 样式 ， 主 要 是 
文字 大 小 。 第 22 行 到 第 27 行 设置 了 整个 内 容 部 分 的 样式 ， 这 里 定义 了 内 容 部 分 的 宽度 、 高 度 
及 背景 色 。 第 31 行 到 第 36 行 设置 了 行 与 单元 格 被 选中 前 与 被 选中 后 的 样式 。 

第 三 步 ， 至 此 完成 了 整个 页 面部 分 ， 内 容 显 示 出 来 了 ， 样 式 也 有 了 ， 现 在 还 差 Ajax 部 分 
的 代码 了 ， 下 面 我 们 再 来 看 一 下 相关 代码 。 


1. this.tablecloth= function(){ 

var highlightCols =true; 

3 var highlightRows = false; 

4 Var selectable = true; 

5 Var tableover = false; 

6 this.start = function(){ 

ys var tables = document .getElementsByTagName ("table"); 

8 for (var i=0;i<tables.length;i++){ 

9 tables[i] .onmouseover = function() {tableover =true}; 


Ls tables[i] .onmouseout = function () {tableover = false}; 
jE rows (tables[i]); }7 }7 
到 2 this .rows = function (table) 1{ 
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TS Var css= "ry 

14. vartr=table.getElementsByTagName ("tr"); 

了 for (var i=0;i<tr.length;i++) {css= (css=="odd") ? "even" : 
sod 

EGR tr[i]l .className=css7 Var arr=new Array(); 

Es for (var j=0;j<tr[i] .childNodes.length;j++){ 

ES if(tr[i].childNodes[j] .nodeType ==1) arr.push (tr[i]. 
childNodes[j]); 1 

19。 for (var j=0;j<arr.length;j++){ 

208 arr[j] .row=i; arr[j] .col= 

2 if(arr[j] .innerHTML == "gnbsp;" || arr[j] .innerHTML == "") 

2 arr[j] .className += " empty"; 

3 arr[j].css=arr[j] .className; 

4 arr[j] .onmouseover = function(){ 

2 over (table, this, this.row,this.col); }; 

2 arr[j] .onmouseout = function(){ 

局 out (table, this, this.row,this.col);}; 

28. arr[j] .onmousedown = function(){ 

down (table, this, this.row,this.col); }; 

29. arr[j] .onmouseup = function() 

{up (table, this, this.row,this.col); }; 

30- arr[]j].onclick=function() 

{click(table, this, this.row,this.col);}; ey 

ce this.over = function (table, obj, row, col){ 

2 if (!highlightCols && !highlightRows) obj.className =obj.css 

VOVer 

33。 if (checkl (obj,col)){if(highlightCcols) 

highlightCol (table, obj, col1); 

34. if (highlightRows) highlightRow (table,obj,row); }; }; 

35> this.out= function(table,obj,row,col){ if (!highlightCols && 


!highlightRows) obj .className = obj.css; unhighlightCol (table, col) ;unhighlig 
htRow (table, row); 7 


36. this.down = function (table, obj, row, col) {obj .className = obj. 
css+"down"; }; 

337 this.up= function(table, obj,row,col) {obj.className =obj.css+" 
Over™; 到 

全 this.click= function (table, obj, row, col){ 

9 if(checkl){ if(selectable) { unselect (table); 

40. if (highlightCols) highlightCol (table, obj, col, 
true); 

内 if (highlightRows) highlightRow (table, obj, row, 
true); 

7 全 document .onclick=unselectAll;} #3 

人 clickAction (obj); }; 

44. this.highlightCol = function (table,active,col, sel){ 

过 与 < Var css= (typeof (sel) != "undefined") ? "selected" : "over"; 
46. var tr=table.getElementsByTagName ("tr"); 

和 for (Var i=0;i<tr.length;i++){ 

48. Var arr =new Array(); 

A for (j=0;j<tr[i] .childNodes.length;j++){ 

1 及 if(tr[i] .childNodes[j] .nodeType == 1) arr. 
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push (tr[i].childNodes[j]); | 


Sl Var obj =arr[col]; 

5 if (check2 (active, obj) && check3 (obj)) obj .className = 
Obj Cs "ess 2 j 

于 this.unhighlightCol = function (table, col){ 

54. vartr=table.getElementsByTagName ("tr"); 

5 for (var i=0;i<tr.length;i++){ 

56. Var arr = new Array(); 

ST for(j=0;j<tr[i] .childNodes.1length;j++){ 

号 SS if(tr[i]l.childNodes[I]j].nodeType==1) arr. 
Push (tr[i]l.childNodes[j]) 

3 有 

60 . var obj =arr[col]; 

61: if(check3 (obj)) obj.className =obj.css; };7}; 

62. this.highlightRow= function (table,active, row, sel){ 

OE var css= (typeof (sel) != "undefined") ? "selected" : "over"; 
64. vartr=table.getElementsByTagName ("tr") [row]; 

二 for (var i=0;i<tr.childNodes.length;i++) { 

66. var obj =tr.childNodes [i]; 

[故居 if (check2 (active,obj) && check3 (obj)) obj.className =obj.css+"™" 
Con ks 

68. this.unhighlightRow= function (table, row){ 

G9 vartr=table.getElementsByTagName ("tr") [row]; 

O's for (var i=0;i<tr.childNodes.length;i++) { 

ye var obj =tr.childNodes [i]; 

2 if (check3 (obj) ) obj .className =obj.css; }; ha 
33, this.unselect = function (table){ 

74. tr=table.getElementsByTagName ("tr") 

Ds for (var i=0;i<tr.length;i++){ 

76. for (var j=0;j<tr[i] .childNodes.length;j++) { 

5 var obj =tr[i] .childNodes[j]; 

78 . if(obj.className)obj.className= obj.className . 

replace ("selected", ""); }7 }7 

TE start (); }; 


80. window.onload= tablecloth; 


在 上 面 代码 中 ， 最 后 第 80 行 是 打开 网 页 的 时 候 就 调用 后 面 的 这 个 函数 tablecloth。 第 1 到 第 
11 行 中 ，tablecloth 这 个 函数 的 作用 就 是 声明 了 变量 ， 并 赋 了 初 值 ， 在 start 函 数 中 设置 当 鼠 标 
移动 到 列 的 上 面 及 移 开 列 时 所 需要 调用 的 函数 ， 同 时 下 面 调用 了 rows 的 这 个 函数 。 第 12 行 到 
第 30 行 完成 了 通过 循环 判断 表格 使 用 了 哪 种 样式 ， 如 果 是 被 选中 前 的 样式 ， 那 么 就 使 用 被 选 
中 后 的 样式 。 

第 31 行 到 第 37 行 设置 了 鼠标 over 与 out 时 所 需要 调用 的 函数 名 称 ， 第 44 行 到 第 54 行 、 第 63 
行 到 第 67 行 代码 的 函数 是 鼠标 over 时 所 调用 的 函数 体 ， 第 55 行 到 第 62 行 、 第 68 行 到 第 72 行 是 
鼠标 out 时 所 调用 的 函数 体 。 第 38 行 到 第 43 行 设置 了 当 表 格 被 单 击 时 ， 所 需要 执行 的 函数 ， 第 
73 行 到 第 78 行 定义 了 当 表 格 被 单 击 时 通过 循环 当前 列 所 设置 的 样式 。 

现在 可 以 看 到 Ajax 的 局 部 刷新 效果 ， 比 如 上 述 的 第 31 行 到 第 37 行 ， 通 过 Ajax 定义 了 鼠标 
移动 的 效果 ， 这 里 需要 注意 ， 不 是 更 新 全 部 表格 CSS 的 效果 ， 而 是 更 新 鼠标 移动 目标 当前 列 
的 CSS 效 果 。 
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13.4” 实 训 一 XML 与 CSS 结 合 的 练习 


范例 13-1: 【光盘 位 置 】\sample\chap13WXML 与 CSS 结 合 的 练习 \index.xml 


本 章 讲述 了 关于 XML 的 一 些 基本 知识 ， 并 讲述 了 用 CSS 美 化 XML 页 面 的 一 些 方法 ， 在 本 
节 实 训 中 ， 将 实现 一 个 采用 CSS 样 式 的 XML 来 练习 之 前 所 学 到 的 内 容 ， 并 用 CSS 美 化 这 部 分 
的 网 页 。 

1. 需求 描述 

本 范例 的 效果 如 图 13-4 所 示 ， 左 中 右 结构 的 排版 最 为 实用 ， 又 不 浪费 页 面 空间 ， 还 能 显 
示 大 量 的 信息 ， 对 于 门户 类 网 站 尤其 适用 。 它 包括 最 左边 的 “汽车 新 闻 ”、 中 间 的 “时 尚 新 
闻 ”， 以 及 最 右边 的 图 片 。 

这 样 的 设计 ， 可 以 让 整体 版 面 显得 饱满 ， 又 不 杂乱 。 为 了 获得 较 高 的 代码 可 移植 性 ， 要 
求 用 XML+CSS 的 方式 来 实现 。 


-6 营业 ; 关注 儿 重要 东安 全 弛 宣 由 多- 失 同 扩 
“新 赛区 两厢 1 2L 上 市 舍 564-6.63 万 试 中 实 拍 


“ 阐 邓 Ci 央行 车 上 市 售 :3 万 起 大 办 少 三 必 POLO 唱 光 

“ 哄 国 产 [网 有 商 务 3 红 车 对 比 明 移 查办 版 明年 引进 

“ 锐 丰 陪 2 8 万 进口 队 理 :7 大 名 天 58 沪 跌 3377 
四 “日 产 Jdke 告 价 12 7 万 201 | 歌 SEELBY GT300 


图 13-4 ” 实 训 效果 图 


在 设计 这 个 页 面 的 时 候 ， 需 要 把 大 致 框架 先 搭建 好 ， 然 后 在 搭建 好 的 框架 内 填 入 所 需 的 
信息 。 


2. 构建 XML 页面 


首先 需要 创建 一 个 XML 页 面 ， 同 时 用 自己 的 标签 搭建 基本 框架 ， 并 在 页 面 中 划分 “汽车 
新 闻 ”、“ 时 尚 新 闻 ” 和 图 片 部 分 。 措 建 XML 页 面 的 代码 如 下 所 示 。 


1. <?XML version="1.0" encoding="utf-8"2> 
RDEO 

3 <one> 

4 <nei> 

轩 避 <tu></tu> 

6 </nei> 

2 </one> 

8 <two> 
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<nei> 
<tul></tul> 

</nei> 

</two> 


. <three></three> 
14. 


</big> 


第 2 行 定义 一 个 标签 big， 然 后 再 加 入 3 个 标签 one、two 和 three。 接 下 来 ， 在 one 和 two 标 记 
内 加 上 nei、tu、tul 标 记 ， 如 第 4 行 所 示 ， 之 后 可 以 通过 CSS 定 义 该 标记 的 样式 ， 以 实现 我 们 
所 需要 的 效果 。 

3. 引入 CSS 文 件 


在 构建 的 XML 文件 的 页 头 部 分 之 前 ， 需 要 引用 CSS 文 件 ， 这 个 文件 直接 在 页 面 中 定义 
“<?XML-stylesheet type="text/css" href="XML.css"?>”， 并 将 样式 写 入 CSS 文 件 中 ， 这 样 就 
能 让 CSS 的 样式 作用 到 XML 文 档 里 ， 代 码 如 下 所 示 。 


Ls 
2 


<?XML version="1.0" encoding="utf-8"2> 
<?XML-stylesheet type="text/css" href="XML.css"?> 


4. 开发 正文 部 分 的 XML 代码 


网 页 的 框架 需要 用 XML 代码 措 建 起 来 ，XML 代 码 如 下 所 示 ， 其 中 第 2 行 引 入 了 XML.css 文 


oawm 必 wm 


<?XML version="1.0" encoding="utf-8"?> 
<?XML-stylesheet type="text/css" href="XML.css"?> 
<big> 
<one> 
<nei> 
<tu></tu> 
新 能 源 车 鼓励 政策 细则 再 爽 约 
<br /> 
零 部 件 商 200 元 脚 垫 仅 赚 10 元 
<br /> 
厂商 施 围攻 战略 捕杀 SUV 市 场 
<br /> 
</nei> 
“6.1 策 划 : 关注 儿童 乘 车 安全 给 宝贝 多 一 份 呵护 
<br /> 
。 新 赛欧 两 厢 1 . 2 上 市 售 5. 68-6. 68 万 试 驾 实 拍 
Xbr /> 
“奔驰 c 级 旅行 车 上 市 售 43 万 起 大 众 新 三 厢 POLO 曝 光 
<br /> 
“6 款 国 产 顶 配 商务 B 级 车 对 比 朗逸 蓝 驱 版 明年 引进 
<br /> 
“锐志 降 2 . 8 万 进口 雅 尊 降 2 万 沃尔沃 S80LI 降 3. 3 万 
<Br /> 
“图 吧 | 日 产 Juke 售 价 12.7 万 2011 款 SHELBY GT500 
</one> 


. <two> 
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27. <nei> 

28 . <tul></tul> 

29. ” 老 同学 聚会 ， 欢 乐 背后 暗藏 危机 ? 

SO <Bre /> 

31. ”0L 最 爱 妩媚 夏季 发 型 魅力 长 发 性 感 建议 
32> <br /> 

33. ” 苗 练 4 周 告别 水 桶 腰 红 遍 网 络 瘦 腿 经 验 
34. <br /> 

35. </nei> 


36. “美容 | 妙招 消灭 草莓 鼻 揭秘 N 个 防晒 真相 拯救 吸烟 疲惫 肌 


37:” <brl> 

38. “服饰 | 这 样 穿 非常 显 腰 20 款 裙 装 众人 瞩目 大 胆 性 感 不 走光 

39- <bry> 

40. “情感 | 老婆 竟 借 钱 养 情 人 分 手 后 扔 不 扔 信物 小 三 也 有 破绽 

41. <br /> 

42. “风尚 | 镁 光 灯 下 的 明星 宝贝 麦 姐 热 辣 广 告 拍摄 花架 曝光 

a b> 

44. “。 奢 品 | 玩具 勾 起 的 童年 记忆 50 年 来 最 经 典 十 大 明星 裙 装 

er 

46. “写真 | 范冰冰 抵制 " 伪 娘 " 大 胆 追 爱 的 女 星 明星 减肥 失控 

47. </two> 

48. <three></three> 

49. </big> 

在 上 面 代 码 中 ， 第 4 行 到 第 25 行 是 第 一 块 部 分 ， 也 就 是 左面 的 一 块 ， 这 里 的 标记 定义 为 
<one>。 

第 6 行 放置 图 片 ， 因 为 XML 不 能 使 用 原 有 的 HIML 标 签 了 ， 所 以 我 们 只 能 在 CSS 里 设置 
站 | 


间 的 


这 和 


第 7 行 到 第 24 行 是 第 一 块 需要 显示 的 内 容 部 分 。 第 26 行 到 第 47 行 是 第 二 块 部 分 ， 也 就 是 中 


块 ， 所 需要 的 操作 与 第 一 块 相同 ， 这 里 就 不 详细 说 明了 。 最 后 一 块 主要 显示 一 张 图 片 ， 


有 也 不 能 放置 HTML 图 片 ， 所 以 第 48 行 代码 和 第 6 行 代码 一 样 ， 都 只 给 出 一 对 空 的 标记 。 
5. 开发 正文 部 分 的 样式 代码 
如 果 不 开发 CSS 部 分 的 代码 ， 那 就 无 法 让 XML 具 有 图 13-4 所 示 的 效果 ， 所 以 还 需要 设置 


big{ 


下 页 面 的 样式 。 这 个 示例 中 的 CSS 样 式 代码 如 下 所 示 。 


width:900px; 
font-size:12px; 
font-family:" 宋 体 "; 
margin:0 auto 0 auto; 


display:block; 
} 


width:350px; 
border:#6633FF lpx solid; 
float:left; 


281 


人 IEDIV+CSSmmrnsna I 


Ta line-height:25px; 

1 全 background-color:#CCCCCC; 

Go- 

17. twof{ 

18. width:350px; 

19. border:#CC6600 lpx solid; 

之 Ds float:left; 

和 2 line-height:25px; 

2 margin-left:10px; 

之 汪 background-color:#FFFF99; 

24. 二 

25 > 

26> width:115px; 

2 height:70px; 

28. background-image:url (001.jpg); 
之 9 float:left; 

30 margin: 5px 0 0 5px; 

3 } 

SZ tnt 

< width:115px; 

3 height:70px; 

< background-image:url (002.jpg); 
DS float:left; 

SA margin:5pPx005px7 

二 6 } 

39. neif{ 

40. border-bottom:#999999 dashed lpx; 
A } 

42. threef{ 

Se background-image:url (003.jpg); 
44. width:150px; 

45. height:230px; 

46. margin-left:10px; 

5 


首先 看 一 下 针对 big 部 分 的 样式 ，big 是 XML 里 的 根 元 素 ， 所 以 这 部 分 的 CSS 可 以 作用 到 
整个 XML 的 范围 上 ， 代 码 的 第 1 行 到 第 6 行 是 对 big 块 所 做 的 样式 设置 ， 它 设置 了 整体 框架 的 
宽度 、 字 体 大 小 、 字 体 样 式 和 外 边框 等 。 

第 7 到 第 9 行 设置 了 br 的 样式 ， 整 个 部 分 设置 成 block。 

第 10 行 到 第 24 行 ， 通 过 设置 CSS 里 的 one 和 two 的 标记 ， 来 设置 XML 里 相对 应 元 素 的 样 

式 ， 这 里 设置 了 它们 的 宽度 、 行 高 、 浮 动 特性 、 边 框 线 和 背景 色 。 
1 于 XML 页 面 不 能 再 使 用 原 有 的 HIML 标 签 ， 所 以 这 里 无 法 使 用 mg 标签 ， 只 能 先 定义 
一 个 tu 以 及 tul 标 记 ， 然 后 给 该 标记 设 定 背 景 图 样式 ， 这 样 就 能 够 达到 与 使 用 img 标 签 相 同 的 
样式 了 ，tu 与 tt1 标 记 的 样式 在 第 25 到 第 38 行 代码 中 定义 了 ， 主 要 设置 了 这 一 块 的 宽度 、 高 度 
以 及 相应 的 图 片 。 

第 39 到 第 41 行 设置 了 nei 的 样式 ， 包 括 划 线 的 样式 及 宽度 ， 这 样 就 使 图 片 后 面 的 这 一 块 文 
字样 式 与 其 他 部 分 的 文字 样式 不 同 ， 也 强化 了 视觉 效果 。 
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第 42 到 第 47 行 设置 了 最 后 第 三 块 的 图 片 样式 ， 因 为 它 只 是 一 张 图 片 ， 所 以 同样 将 图 片 设 


置 为 背景 色 ， 并 设置 了 它 的 宽度 和 高 度 。 


这 样 ， 完 成 了 整个 实 训 的 实现 ， 相 信 读 者 也 能 够 自己 动手 实现 一 些 这 方面 的 页 面 效 果 了 。 


13.5 实 训 一 一 Aj 


ax 与 CSS 结 合 的 练习 


范例 13-2: 【光盘 位 置 】\sample\chap13\WAjax 与 CSS 结 合 的 练习 \index.html 


在 前 几 节 中 讲解 了 Ajax 的 基础 知识 ， 以 及 结合 ee 美化 。 
本 节 将 制 做 一 个 实例 ， 来 加 强 我 们 对 Ajax 与 CSS 样 式 的 综合 应 用 能 力 ， 同 时 加 深 读 者 对 Ajax 


与 CSS 的 理解 。 
1. 需求 分 析 


本 实 训 要 求实 现 如 图 13-5 所 示 的 文件 载 入 效果 。 当 页 面 刚 刚 打 开 时 ， 下 面 的 黄色 进度 条 


位 于 初始 位 置 ， 然 后 进度 条 就 会 慢 慢 增长 ， 
图 13-6 所 示 。 


正在 载 入 ,请 稍 后 … 


图 13-5 “ 实 训 效果 图 


其 中 的 动态 效果 使 用 Ajax 技术 来 完成 ， 
将 运用 到 第 13.3 节 所 讲 的 Ajax 与 CSS 技 术 。 


2. 创建 HTML 页 面 
在 这 个 实 训 中 ， 首 先 需要 将 HIML 页 面 


同时 会 在 进度 条 上 显示 相应 的 百分比 数 ， 效 果 如 


正在 载 入 ,请 稍 后 … 


图 13-6 ”页 面 加 载 后 效果 


而 所 有 的 样式 都 是 在 CSS 文 件 中 定义 ， 这 个 范例 


构造 出 来 ， 定 位 好 需要 显示 的 内 容 ， 并 将 内 容 加 


入 即 可 。 下 面 来 看 一 下 HTML 页 面 代 码 ， 如 


RENULE> 
. <head> 
- <tit1le> 预 载 模拟 </title> 
. <head> 


<divelass="ioad "> 


下 所 示 。 


<pstyle="width:1%" 1d="load ”></p> 


- 正在 载 入 ， 请 稍 后 .. - 
</div> 


区 
3 
4 
5. <body> 
6 
A 
8 
De 
10. </body> 
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Ti. </hEmnl> 


可 以 看 到 ， 这 部 分 的 代码 只 有 短 短 的 11 行 ， 下 面 分 析 一 下 这 些 代码 的 作用 。 

第 1 行 与 第 11 行 是 一 组 <html> 标 签 ， 这 是 HTML 页 面 的 根基 ， 是 必须 使 用 的 标签 ， 第 2 
行 与 第 4 行 的 代码 是 一 组 <head> 标 签 ， 用 来 显示 页 面 的 头 部 信息 ， 第 3 行 代码 里 面 的 <title> 标 
签 ， 定义 页 面 标题 栏 所 显示 的 内 容 ， 网 页 的 标题 都 要 写 在 这 里 。 

第 5 行 到 第 10 行 就 是 需要 显示 的 内 容 ， 也 是 这 个 HTML 页 面 的 主要 部 分 ， 这 里 定义 了 一 个 
DIV， 这 个 DIV 就 是 整个 页 面 的 容器 。 

第 6 行 代码 中 的 class="load"， 说 明 通 过 lo0ad_ 引用 相应 的 样式 。 第 7 行 主要 初始 化 了 进度 
条 的 宽度 。 


3. 引入 并 设计 CSS 样 式 


HTML 页 面 已 经 设计 好 了 ， 接 下 来 定义 CSS 样 式 代 码 ， 这 里 将 CSS 样 式 放 在 了 HTML 页 
的 <head> 标 签 内 了 ， 所 以 需要 在 <head> 标 签 内 加 入 <style type="text/css"></style> 标 签 ， 样 式 
代码 放 在 style 标 签 之 间 。 

CSS 样 式 代码 如 下 所 示 。 


load { 

width:200px; 

height:40px; 

padding:20px 50px; 

margin:20px; 

font-size:9pt; 

background:#eee; 

} 

:load pi{ 

10. margin-bottom: 8px; 

11. height:12px; 

12. line-height:12px; 

13. border:1px solid; 

14. border-color:#fff #000 #000 #£ff; 
15. padding:4px 2px 2px; 

16. text-align:right; 

17. font-size:7pt; 

18. font-family:Lucida Sans!important; color:#333; background:#ff0; 
hb 


在 上 面 代 码 中 ， 第 1 行 到 第 8 行 设置 了 内 容 部 分 的 样式 ， 它 作用 于 整个 页 面 的 内 容 部 分 。 
第 2 行 与 第 3 行 设置 了 内 容 区 域 的 宽度 及 高 度 ， 并 给 出 了 固定 值 。 第 4 行 到 第 5 行 设置 了 边 距 。 
第 6 行 与 第 7 行 设置 了 字体 大 小 与 背景 色 。 
第 9 行 到 第 19 行 主要 针对 HTML 页 面 中 的 第 7 行 来 设置 的 ， 这 里 设置 了 页 面 进度 条 部 分 的 
样式 。 第 10 行 和 第 15 行 都 设置 了 边 距 ， 第 11 行 设置 了 高 度 ， 第 13 行 设置 了 进度 条 的 边框 样式 
及 宽度 ， 第 14 行 设置 了 边框 的 颜色 ; 第 16 行 到 第 18 行 主要 是 对 进度 条 上 的 文字 做 了 设置 ， 如 
文字 对 齐 方式 、 字 体 大 小 、 字 体 及 颜色 等 。 
4. 实现 动态 效果 的 AJAX 代 码 


完成 了 所 有 的 样式 及 页 面 代 码 后 ， 还 差 最 后 的 Ajax 代 码 了 ， 下 面 看 一 下 这 部 分 代码 的 内 容 。 


恒 


OAAMARODF 


vv 
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哪里 开始 运行 的 了 。 


o vawo 必 wm 


24 
2 5 


function $ (id,tag) 

{ 

if(!tag) 

{ 

return document .getElementById (id); 

} 

else 

{ 

return document .getElementById (id) .getElementsByTagName (tag); 


-1} 
-1} 
. function load (obj,s){ 


Var objw=$ (obj) .style.width; 
if (objw!="101%"){ 
if(!s) {var s=0;} 
$ (obj) .innerHTML=objw; 
$ (obj) .style.width=s+"%"; 
S++? 
setTimeout (function () {loads (obj,s)},50); 


elsef{ 
$ (obj) .innerHTML=" 完 毕 !!111"; 


.1} 


loads_ ("load "); 


在 上 面 代码 中 ， 第 1 行 到 第 11 行 代码 获取 到 进度 条 的 这 一 块 的 ID 值 ， 这 样 程序 就 知道 从 


第 3 行 


到 第 6 判断 tag 的 值 是 否 为 空 ， 如 果 为 空 则 直接 通过 ID 获 取 到 进度 条 部 分 的 标签 ， 第 


7 行 到 第 10 行 定义 了 如 果 tag 的 值 不 为 空 ， 那 么 就 能 通过 tag 的 值 取得 进度 条 部 分 的 标签 了 。 
ee 同时 显示 进度 条 进度 的 百分比 。 第 13 


行 创建 
101%, ws 环 。 


一 个 变量 objw 来 获取 到 当前 进度 条 的 宽度 值 ， 第 14 行 判断 进度 条 的 宽度 值 是 否 达到 


第 21 行 到 第 23 定 义 如 果 进 度 条 进度 达到 100% 了 ， 那 么 就 跳出 循环 ， 并 且 在 进度 条 上 显示 
“完结 ! ! ! ”字样 。 第 25 行 代码 在 页 面 加 载 完毕 后 就 运行 load_ 函 数 。 
到 此 ， 我 们 就 完成 了 本 节 的 实例 。 在 实 训 中 ， 主 要 练习 了 如 何 综合 使 用 Ajax 与 CSS 样 


式 ， 从 而 使 页 面 达 到 更 好 的 效果 ， 能 够 更 吸引 用 户 的 眼球 。 


13.6 上 机 是 


(1) 请 使 用 CSS+Ajax 完 成 如 图 13-7 所 示 的 效果 ， 要 求 如 下 。 
中 使 用 CSS 完 成 对 字体 的 设置 : 字号 为 24 号 、 字 体 为 tahoma。 
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@ 下 拉 列 表 框 内 的 日 期 被 更 改 后 ， 下 面 的 日 期 也 随 着 更 改 ， 但 要 求 整个 页 面 不 随 着 更 
新 ， 只 有 显示 文字 部 分 刷新 。 


请 选择 您 的 出 生年 月 日 : 


2005F1 有 2 el 


您 的 出 生年 月 日 为 2005-1-2 


图 13-7 上 机 习题 1 效果 图 


(2) 请 使 用 CSS+XML 的 方法， 完成 如 图 13-8 所 示 的 效果 ， 要 求 如 下 。 


图 13-8 ”上 机 习题 2 效果 图 


@ 使 用 XML 文档 格式 写 出 “美好 时 光 ” 四 个 字 ， 标 记名 字 可 以 自己 定义 ， 注 意 名 命 规 


>D。 


@ 所 有 样式 均 需 要 写 在 CSS 文 件 内 ， 不 得 写 在 XML 文档 内 部 。 注 意 文字 后 面 的 阴影 部 分 
及 背景 色 。 


完成 这 个 题目 需要 注意 以 下 两 点 。 


@ 注 意 在 XML 里 链接 CSS 的 方法 。 

@ 所 有 的 在 HIML 内 通用 的 元 素 在 XML 里 需要 谨慎 使 用 ， 定 义 后 需要 及 时 在 CSS 代 码 里 
声明 。 
(3) 请 使 用 CSS+XML 的 方法 ， 完 成 如 图 13-9 所 示 的 效果 ， 要 求 如 下 。 

@@ 标 题 部 分 ， 字 体 采用 18 像 素 ， 行 高 采用 25 像 素 ， 文 字 居 中 显示 ， 并 且 适 当地 设置 字体 
颜色 。 

@ 整 个 XML 文档 中 ， 采 用 适当 的 背景 色 ， 并 设置 字体 为 宋体 。 

@ 设 置 整体 的 边框 效果 ， 颜 色 可 以 自 定 ， 但 边框 宽度 是 1px。 

@ 在 正文 部 分 ， 行 高 设置 为 20px。 


os Ee 
se | 
Re 
于 


图 13-9 ”上 机 习题 3 效果 图 
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(4) 请 使 用 CSS+tXML 的 方法 ， 完 成 如 图 13-10 所 示 的 效果 ， 要 求 如 下 。 


中 请 使 用 XML 文档 来 编写 所 要 显示 的 诗词 ， 标 记 注 意 命名 规范 ， 不 要 使 用 无 意义 的 名 称 。 

@ 所 有 的 样式 都 要 写 在 CSS 文 件 内 ， 在 XML 文档 内 不 允许 出 现 样式 说 明 ， 注 意 标 题 有 背 
景色 。 

@@ 标 题 部 分 采用 居中 效果 ， 而 唐诗 正文 部 分 ， 前 方 用 圆 点 作为 标记 。 

四 边框 部 分 采用 绿色 ， 宽 度 设置 为 1px。 


静夜 思 李白 - 唐 


13-10 上 机 习题 4 效果 图 


(5) 请 使 用 CSS+AJAX 的 方法 ， 完 成 如 图 13-11 所 示 的 效果 ， 要 求 如 下 。 


@ 图 13-11 的 效果 为 页 面 加 载 后 的 效果 ， 其 中 文字 部 分 使 用 了 CSS 样 式 ， 要 求 CSS 的 样式 
写 在 CSS 文 件 内 ， 在 页 面 的 HTML 代码 中 不 允许 出 现 样式 代码 。 

@ 当 用 户 输 入 帐号 和 密码 ， 单 击 添加 按钮 后 ， 会 即时 在 下 面 的 表格 中 显示 出 帐号 及 密 
码 ， 同 时 清空 帐号 及 密码 文本 框 内 容 ， 要 求 当 前 页 面 不 刷新 ， 只 有 表格 部 分 刷新 ， 并 且 在 操 
作 栏 内 显示 删除 按钮 ， 单 击 删 除 可 以 删除 当前 行 的 数据 ， 效 果 如 图 13-12 所 示 。 


帐号 ; 密码 : E> 
帐号 密码 操作 


图 13-11 上 机 习题 5 效果 图 (1) 


帐号 ; 密码 : EB 
帐号 密码 ”操作 
zhangSan 123456 [ 击 几 | 


图 13-12 ”上 机 习题 5 效果 图 (2) 
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解决 CSS 开 发 中 的 党 < 
见 问题 ” 苔 1 缠 


在 编写 DIV 和 CSS 的 过 程 中 ， 我 们 经 常会 遇 到 一 些 古 怪 的 问题 ， 比 如 虽 
然 语法 正确 ， 但 在 一 些 浏览 器 里 ，CSS 效 果 就 是 出 不 来 。 

这 些 问题 对 于 资深 美工 来 说 ， 可 能 不 是 问题 ， 但 对 于 初学 者 来 说 ， 可 能 
就 会 无 所 适 从 了 ， 本 章 就 来 归纳 一 些 这 方面 的 问题 。 在 本 章 中 ， 我 们 将 讲述 
的 重点 内 容 如 下 。 


。 CSS 不 兼容 问题 的 症状 以 及 解决 方法 
。 解决 HTML 和 CSS 文 本 里 的 中 文 编码 问题 


14.1 解决 浏览 器 不 兼容 的 问题 


第 3 章 提 到 了 一 些 CSS 不 适用 所 有 浏览 器 的 问题 ， 本 节 将 按照 “症状 一 一 问题 点 分 析 一 一 
解决 方案 ”的 思路 ， 分 析 一 些 常见 的 浏览 器 不 兼容 的 问题 。 


BE 解决 字体 大 小 不 兼容 的 问题 
各 个 浏览 器 对 字体 大 小 small 的 定义 不 同 ， 所 以 同样 使 用 small， 但 显示 的 字体 大 小 效果 不 


样 。 下 面 看 一 个 例子 ， 来 演示 一 下 IE 和 Firefox 浏 览 器 中 small 字 体 大 小 究竟 差 了 多 少 ， 请 看 
下 面 一 段 HIML 代 码 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 表 单 实 训 </title> 
<style> 
-fonf 
font-size:small; 
} 
</style> 
.</head> 
.<body> 
-<form> 
-</div> 


o vanao 必 wm 


上 
IN 口 


Pm 
CO 


TO ET WCsSHR tn 


14. <divclass="fon"> 
15- ”浏览 器 不 兼容 字体 大 小 
16. </div> 

17. </form> 

18. </body> 

19. </html> 


正 浏览 器 中 所 显示 出 来 的 文字 大 小 ， 如 图 14-1 所 示 。 
而 在 Firefox 中 所 显示 出 来 的 文字 大 小 ， 如 图 14-2 所 示 。 


表单 实 训 ozilla Firefox 


文件 中 编辑 于 ) 查看 WD 收藏 由) 工具 ( 文件 F) 编辑 人 E) 查看 YW) 历史 
四 让- 加- 国 国 的 及 CX 合 EI 
中 址 0) | 个 C:\Documents and Settines\Adninis 男 访问 最 多 稳 新 手 上 路 访 ] 最 新 头条 
浏览 器 不 兼容 字体 大 小 浏览 器 不 兼容 字体 大 小 

图 14-1 ”下 浏览 器 效果 图 14-2 firefox ”浏览 器 效果 


大 家 对 比 看 一 下 ， 两 个 浏览 器 所 显示 的 字体 大 小 差别 很 明显 。 这 就 是 由 于 不 同 浏览 器 对 
字体 大 小 small 不 同 的 定义 所 造成 的 。Firefox 将 small 定 义 为 13px， 而 正 将 small 定 义 为 16px， 所 
以 这 样 就 导致 了 同样 的 设置 ， 在 两 个 不 同 的 浏览 器 中 所 显示 的 字体 大 小 差别 这 么 大 了 。 

这 个 问题 的 解决 办 法 是 ， 在 页 面 中 设置 文字 大 小 的 时 候 ， 不 要 使 用 small 设 置 大 小 ， 直 接 
设置 为 1Spx 等 具体 的 数值 ， 这 样 ， 不 管 在 何 种 浏览 器 中 都 会 以 同样 的 方式 识别 ， 就 不 会 出 现 
字体 有 差异 的 问题 了 。 

还 使 用 上 面 的 代码 为 例 ， 把 文字 的 大 小 更 改 为 具体 的 数值 ， 这 里 定义 为 15px， 代 码 如 下 
所 示 。 


<htm] xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 表 单 实 训 </title> 
<style> 
.fonf 
font-size:15px; 
} 
</style> 
-</head> 
-<body> 
-<“form> 
:</divs 
. <div class="fon"> 
浏览 器 不 兼容 字体 大 小 
.</div> 
-</form> 
-</body> 
.</html> 


在 上 面 代 码 中 ， 第 7 行 定义 文字 大 小 为 15px， 下 面 再 来 看 一 下 在 两 种 浏览 器 中 的 效果 ， 
如 图 14-3 所 示 。 


FFPeopwaow 上 wb 
本 


三 广 
心 w 


FF FF 
oJau 
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文件 (E) 编辑 (E) 查看 (Y) 历史 (8) 裕 
(十 ac x 翁 关上 
目 加 “了 使用 X 狐 中 国 版 图 访问 最 多 


浏览 器 不 兼容 字体 大 小 


-了 表单 实 训 
多 火 玫 中 国 版 更 新 履 | 立即 格 炎 政 中 国 版 和 级 
浏览 器 不 兼容 字体 大 小 

正 浏览 器 效果 firefox 浏 览 器 效果 


图 14-3 ”解决 字体 不 兼容 问题 效果 图 


在 图 14-3 中 ， 可 以 看 到 两 个 浏览 器 中 的 字体 大 小 相同 ， 没 有 差别 。 这 样 就 解决 了 这 种 字 
体 大 小 不 兼容 的 问题 。 


解决 DIV 里 的 foat 最 浮 问题 


在 网 页 中 ， 经 常 需要 使 用 DIV 分 块 对 页 面 进行 布局 ， 并 使 用 到 float 来 设置 浮动 。 但 是 在 
下 浏览 器 与 Firefox 中 ， 两 个 相连 的 DIV 块 ， 如 果 一 个 设置 左 浮动 ， 一 个 设置 右 浮 动 ， 这 时 就 
会 出 现 问题 ， 下 面 我 们 用 相同 的 一 段 代码 来 看 一 下 效果 。 


oawmewn 


<html xmlns="http://www.w3.o0org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 

.fon { 

float:left; 

} 

-ait 

float:left; 


lh 

-bE 

. float:right; 
.} 
,</style> 
-</head> 

. <body> 
.<form> 


<div class="fon"> 
<div class="a" > 左 浮动 </div> 
<div class="b"> 右 浮动 </div> 


> </div> 
.</form> 
-</body> 
.</html> 


在 上 面 代码 的 第 18 到 第 21 行 ， 一 共 定义 了 三 个 DIV 块 ， 其 中 一 个 大 块 包含 了 两 个 小 的 


DIV 块 。 


第 6 行 到 第 14 行 的 CSS 中 ， 为 最 大 的 DIV 块 设置 了 左 浮动 ， 下 面 两 个 小 块 一 个 设置 了 


左 浮动 ， 一 个 设置 了 右 浮动 。 这 个 页 面 在 正中 的 效果 如 图 14-4 所 示 。 
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ET 
文件 四 编辑 下 ) 查看 如 收 豪 如 工具 中 下 助 人 D ED 


国王 - 司 是 国 久 用 要 六 x 加 辐 - 丢 国 :国航 区 


地 址 四 ) | 居 C: pecwments snd SettingsWainistrater\ 旧 面 Iy 渗 动 | 国 牧 到 总 ” 层 smait 国 过 


左 浮动 右 浮动 


图 14-4 正中 浮动 效果 


可 以 看 到 ， 显 示 的 效果 和 我 们 所 设计 的 一 样 没有 问题 。 下 面 再 来 看 一 下 这 段 代 码 在 
Firefox 浏 览 器 中 的 效果 ， 如 图 14-5 所 示 。 


文件 四 护 名 EE) 查看 WW 历史 G) 书签 @ 工具 加。 帮助 0 
"CC xX Homents md settineyAainisrs 全 |] 回 ;| 月 
男 访问 最 多 和 新 手 上 路 区 最 新 头条 


左 浮动 右 浮动 


图 14-5 ”Firefox 浮 动 效果 


很 明显 ， 在 Firefox 浏 览 器 中 ， 本 来 应 该 右 浮动 的 一 块 并 没有 到 达到 效果 ， 还 是 和 上 一 个 
DIV 块 用 了 相同 的 设置 ， 它 自己 的 设置 没有 生效 。 
这 是 因为 在 正 浏览 器 中 会 根据 设置 来 判断 float 浮 动 ， 而 在 Firefox 中 ， 如 果 上 一 个 float 没 


有 被 清除 的 话 ， 下 一 个 float 会 自动 延 用 上 一 个 float 的 设置 ， 而 不 会 使 用 自己 的 float 设 置 。 
这 个 问题 的 解决 办 法 是 ， 在 每 一 个 DIV 块 设置 了 float 后 ， 在 最 后 加 入 一 句 清除 浮动 的 代 
码 clear:both， 这 样 就 会 清除 前 一 个 浮动 的 设置 了 ， 下 一 个 float 也 就 不 会 再 使 用 上 一 个 浮动 设 


置 ， 从 而 使 用 自己 所 设置 的 浮动 了 。 


下 


使 用 上 面 的 例子 ， 把 代码 按 我 们 所 讲 的 解决 办 法 修改 一 下 ， 代 码 如 下 所 示 。 


OAMAMROGODNDE 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 

ton 

float:left; 

骨 

= 

float:left; 


. Clear:both; 


| 

1 

. float:right; 
| 
-</style> 
-</head> 
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18. <body> 
19. <form> 


20. <div class="fon"> 
2 <div class="a" > 左 浮动 </div> 
2 <div class="b"> 右 浮动 </div> 


23. </div> 
24. </form> 
25. </body> 
26. </html> 


在 上 面 代码 中 ， 第 12 行 前 面 加 了 “clear:both;:”， 下 面 再 来 看 一 下 效果 的 对 比 ， 如 图 14-6 


所 示 。 


文才 器 “ 妨 生 日“ 坦 看 四 中 三 “对 

四 三 -加 -加 国手 

地 址 0) | 析 ] cti 们 上 这 加 9 到 于 
[e >» 

民 swx 图 过 

左 浮动 右 溯 动 


正 浏览 器 效果 firefox 浏 览 器 效果 


图 14-6 ”使 用 清除 浮动 效果 图 


可 以 看 到 ， 两 个 浏览 器 的 效果 都 一 样 了 ， 浮 动 效果 都 在 各 自 相 应 的 位 置 上 ， 这 样 就 解决 


了 浮动 问题 。 


区 二 和 容器 高 


度 的 限定 问题 


容 的 问题 。 


在 网 页 中 ， 经 常 需要 设置 容器 的 高 度 ， 即 hight 的 值 ， 这 个 高 度 的 值 也 会 产生 浏览 器 不 兼 


比如 在 下 浏览 器 中 ， 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 会 超出 所 设置 的 高 度 ， 这 时 浏 
览 器 就 会 自己 撑 开 高 度 ， 以 达到 显示 全 部 内 容 的 效果 ， 不 受 所 设置 的 高 度 值 限制 。 

而 在 Firefox 浏 览 器 中 ， 如 果 固 定 了 高 度 的 值 ， 那 么 容器 的 高 度 就 会 被 固定 住 ， 就 算 内 容 
过 多 ， 它 也 不 会 撑 开 ， 也 会 显示 全 部 内 容 ， 但 是 如 果 容 器 下 面 还 有 内 容 的 话 ， 那 么 这 一 块 就 
会 与 下 一 块 内 容重 合 。 下 面 看 一 个 实例 ， 同 样 使 用 同一 个 页 面 ， 在 两 种 浏览 器 中 查看 效果 ， 


代码 如 下 所 示 。 
1. <html xmlns="http://www.w3.0rg/1999/xhtml"> 
2. <head> 
3. <metahttp-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title></title> 
5 <style> 
Ga -Font 
7. width:50px; 
8. height:20px; 
| 
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10. </style> 
11. </head> 
12. <body> 
13. <form> 
14. <divclass="fon"> 
Se 如 在 IE 浏览 器 中 ， 你 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 
16. </div> 
17. <diva>123454654</div> 
18. </form> 
19. </body> 
20. </html> 
在 上 面 代码 中 ， 第 6 行 到 第 9 行 定义 了 高 度 和 宽度 值 。 第 15 行 定义 的 内 容 部 分 比较 多 。 下 
看 一 下 在 下 浏览 器 中 所 显示 的 内 容 是 什么 效果 ， 如 图 14-7 所 示 。 


号 - 旧 国 国 航 甩 时 裕 Wx @ 忆 -各国 - 国 氛 食 


地 由 四 ) | 轿 c: WDeewnents and SettingzWAdainistrator\ 吕 面 \ 吉 器 商 Ex | 国 ] # 到 “iiE ” 国 snseit 辆 


123454654 


图 14-7 ”下 浏览 器 设置 高 度 的 效果 


可 以 看 到 ， 第 一 块 的 内 容 全 部 都 显示 出 来 了 ， 而 且 在 它 下 面 的 一 块 的 内 容 也 同样 显示 出 
来 ， 但 是 第 一 块 所 设置 的 高 度 20px， 在 这 里 没有 效果 。 这 就 是 正 浏览 器 的 功能 ， 它 会 自动 根 
据 内 容 来 重新 定义 容器 的 高 度 ， 如 果 不 够 高 的 话 会 自动 撑 开 所 需要 的 高 度 。 


下 


在 


第 一 个 DIV 块 的 内 容 虽 然 也 全 显示 出 来 ， 但 是 它 还 占 


面 再 来 看 一 下 同样 的 例子 在 Firefox 浏 览 器 中 是 什么 样 的 效果 ， 如 图 14-8 所 示 。 
文件 四 篇 强 EF) 查看 0) 历史 G) 书签 @) 工具 ID 帮助 0 
-CC XxX MH (D6.// /oments ma settingqyhtinistrd 
男 访问 最 多 乔 新 手 上 路 富 最 新 头条 
如 在 IE 
说 师 器 654 
中 ,你 
如 果 设 
置 了 高 
度 值 ， 
但 是 内 
容 很 
图 14-8 firefox 浏 览 器 中 设置 高 度 的 效果 
图 


14-8 中 ， 可 以 看 到 第 二 个 DIV 块 的 位 置 没有 变化 ， 内 容 也 还 是 显示 在 原来 的 地 方 ， 


了 下 面 的 DIV 块 的 空间 ， 并 且 内 容 还 
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重合 在 一 起 了 ， 这 不 是 我 们 想 要 的 效果 。 

这 个 问题 的 解决 办 法 是 ， 不 要 设置 高 度 的 值 ， 这 样 浏览 器 就 会 自动 根据 内 容 来 判断 高 
度 ， 也 就 不 会 出 现 上 面 的 内 容重 合 的 问题 了 。 

下 面 还 使 用 上 面 的 代码 为 例 ， 去 掉 DIV 块 高 度 的 定义 ， 代 码 如 下 所 示 。 


<html xmlns="http://www-w3-org/1999/Xxhtm1l"> 
<head> 

<meta http-equiv="Content-Type" content="text/htm1; charset=utf-8" /> 
<title></title> 

<style> 

.fonf{ 

width:50px; 

} 

9. </style> 

10. </head> 

11. <body> 

12. <form> 

13: <div class="fon"> 

二 全 如 在 IE 浏览 器 中 ， 你 如 果 设 置 了 高 度 值 ， 但 是 内 容 很 多 ， 
5 元 1/GiW> 

16. <diva>123454654</div> 

17. </form> 

18. </body> 

19. </html> 


来 看 一 下 页 面 在 两 种 浏览 器 中 的 效果 ， 如 图 14-9 所 示 。 


wawm 必 wm 


地 址 相亲 /加 斌 接 > 
osolp” Wl» 恒 


多 ， 
123454654 


正中 的 效果 图 filefox 中 的 效果 图 


图 14-9 不 设置 高 度 时 两 种 浏览 器 效果 对 比 


可 以 看 到 ， 现 在 两 种 浏览 器 的 效果 相同 ， 都 是 根据 内 容 来 自动 定义 块 的 高 度 ， 这 样 两 种 
浏览 器 的 兼容 问题 就 解决 了 。 
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14.2 ”解决 HTML 和 CSS 的 中 文 编码 问题 


在 网 


CSS 与 HTML 页 面 的 默认 编码 问题 


在 使 


页 中 ， 经 常会 磁 到 一 些 因为 编码 格式 而 使 CSS 样 式 无 效 的 问题 ， 本 节 将 介绍 在 CSS 
与 HIML 页 面 中 经 常会 遇 到 的 一 些 编码 问题 。 


DIV+CSS 做 网 页 设计 的 时 候 ， 经 常会 碰 到 IE6 浏 览 器 不 能 正常 解析 CSS 样 式 的 情 


况 。 这 是 为 什么 呢 ? 这 时 ， 我 们 通常 都 会 先 检 查 一 下 代码 有 没有 问题 ，HITML 文 件 的 代码 没 
有 问题 ， 而 CSS 文 件 的 代码 也 没有 问题 ， 但 是 在 CSS 文 件 里 有 一 些 中 文 的 注释 。 


经 过 仔细 研究 终 


发 现 了 问题 ， 一 般 网 页 里 面 都 是 采用 UTF-8 的 编码 格式 ， 这 本 来 对 


设计 网 页 是 没 问题 的 ， 但 问题 就 出 现在 外 部 的 CSS 文 件 默 认 的 是 ANSI 的 编码 格式 ， 而 不 是 
UTF-8 的 格式 。 一 般 的 情况 下 是 不 会 有 问题 的 ， 然 而 ， 当 CSS 文 件 中 包含 有 中 文 注释 的 时 
候 ， 问 题 就 出 现 了 ， 这 应 该 是 IE6 浏 览 器 在 解析 CSS 文 件 时 因为 编码 不 同 而 无 法 正确 解析 所 造 


成 的 ， 所 以 才 出 现 了 上 面 提 到 的 CSS 在 IE6 下 不 起 作用 


我 们 来 看 一 个 页 面 ， 这 个 页 


ed 


释 ， 


ownamwm 必 sw 


EE 


全 
2 
各 = 
4 
5 


代码 如 下 所 示 。 


<html> 
<head> 


的 情况 。 


在 IE6 的 浏览 器 下 运行 ， 并 在 CSS 代 码 中 加 入 了 中 文 注 


<link href="css.css" style="stylesheet" type="text/css"/> 


</head> 

<body> 

<div class="test"> 

<ul> 

<1i><a href="#"> 首 页 </a></1i> 
<1i><a href="#"> 产 品 介绍 </a></1i> 


. <1i><a href="#"> 服 务 介绍 </a></1i> 
. <1i><a href="#"> 技 术 支持 </a></1i> 
. <1i><a href="#"> 立 刻 购买 </a></1i> 
. <1i><a href="#"> 联 系 我 们 </a></1i> 
.</ul> 

-</div> 

-</body> 

-</html> 


上 面 HTML 代 码 使 用 的 CSS 代 码 如 下 所 示 。 


. .testulf 
. list-style:none; 


} /* 这 里 是 test 下 的 ul 的 样式 */ 


2 est 
:Moat:left» 


295 


人 GEDIV+CSSmmrnsna I 


6. width:100px; 

7. background:#CCC; 

8. margin-left:3px; 

9. line-height:30px; 

L021 

11. .testa{ 

12. display:block> 

13. text-align:center; 

14. height:30px; 

5a 

16. .test a:link{ 

17. color:#666; 

18. background:url (arrow off.gif) #CCC no-repeat 5px 12px; 
19. text-decoration:none; 

20=P 

21. .test a:visited{ 

22. color:#666; 

23. text-decoration:underline; 
24. } 

25. .test :hover{ 

26. color:#FFF; 

27. font-weight:bold; 

28. text-decoration:none; 

29. background:url (arrow on.gif) #F00 no-repeat 5px 12px; 


< 1 
首页 在 上 面 CSS 代 码 的 第 3 行 里 ， 加 入 了 中 文 注释 ， 这 个 页 面 显 
磋 狗 示 的 是 一 个 横 排 的 菜单 ， 并 且 鼠 标 移动 到 菜单 上 面 时 有 切换 效 
技术 支持 果 。 页 面 效 果 如 图 14-10 所 示 。 
立刻 购买 这 个 问题 的 解决 办 法 是 : 


Q@@ 把 CSS、HTML 网 页 文件 都 统一 保存 为 UTF-8 格 式 。 

@ 去 掉 CSS 文 件 中 的 所 有 中 文 注释 ， 或 者 把 注释 全 部 都 改 为 
英文 。 

下 面 再 使 用 上 面 的 代码 为 例 ， 按 第 2 种 解决 方法 将 中 文 注释 去 掉 ， 看 看 这 次 的 效果 ， 如 
图 14-11 所 示 。 


到 | 


14-10 ”IE6 浏 览 器 使 用 
中 文 注释 的 效果 


首页 天 该 本 支持。 立刻 购买 。 联系 我 们 


图 14-11 去掉 中 文 注释 的 效果 图 


可 以 看 到 两 次 的 效果 有 很 大 的 区 别 ， 图 14-10 中 根本 就 没有 使 用 CSS 样 式 ， 而 图 14-11 中 达 
到 了 要 求 的 效果 。 所 以 大 家 在 写 注释 的 时 候 要 注意 ， 不 要 使 用 中 文 做 为 注释 内 容 ， 要 养 成 使 
用 英文 做 为 注释 的 好 习惯 ， 这 样 就 不 会 出 现 上 面 所 提 到 的 问题 了 。 第 1 种 解决 方法 的 效果 和 
上 面 图 14-11 的 效果 一 样 ， 有 兴趣 大 家 可 以 去 试 一 下 ， 这 里 就 不 再 说 明了 。 
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CSS 中 文 注释 “ 标 ” 的 问题 


在 使 用 DIV+CSS 做 网 页 的 时 候 ， 还 有 一 种 情况 需要 注意 ， 就 是 在 IE6 浏 览 器 下 注释 不 能 
有 “ 标 ” 字 。 原 因 是 在 下 6 中 ， 注 释 中 含有 “ 标 ” 字 会 导致 页 面 乱 掉 的 情况 。 
我 们 将 CSS 文 件 的 编码 格式 设置 为 ANSI，HTML 页 面 可 以 是 UTF-8 的 编码 格式 。 在 CSS 文 


件 的 注释 中 含有 “ 标 ” 字 ， 这 样 在 IE6 中 运行 就 会 出 现 网 页 乱 掉 的 现象 ， 而 在 下 7 与 Firefox 中 
运行 就 没 问题 。 

下 面 用 上 一 小 节 的 例子 代码 来 做 一 下 这 个 问题 的 演示 ，HTML 部 分 代码 如 下 所 示 。 

La chemi> 

2. <head> 

3. <metahttp-equiv="Content-Type" content="text/html; charset="utf-8" /> 

4. <linkhref="css.css" rel="stylesheet" type="text/css"/> 

5. </head> 

6. <body> 

7. <xdivclass="test"> 

8 <UL> 

9. <1i><a href="#"> 首 页 </a></1i> 


.<1i><a href="#"> 产 品 介绍 </a></1i> 
. <1i><a href="#"> 服 务 介绍 </a></1i> 
. <1i><a href="#"> 技 术 支 持 </a></1i> 
. <1i><a href="#"> 立 刻 购买 </a></1i> 
. <1i><a href="#"> 联 系 我 们 </a></1i> 
Los </ul> 

16. </div> 

17. </body> 

18. </html> 


CSS 部 分 的 代码 如 下 所 示 。 


上 
PO: 


FF 
OD 


1. charset "ANSI"; 

2 .test uli 

3. list-style:none; 

4. }/* 注 释 标 */ 

so testiy 

6. float:left; 

7. width:100px; 

8. background:#cCc; 

9. margin-left:3px; 

10. line-height:30px; 
于 

12. .testaf 

13. display:block; 

14. text-align:center; 
15. height:30px; 

Bony 

LT toesdtannE 

18. color:#666; 

19. background:url (arrow off.gif) #CCCno-repeat 5PX 12px; 
20. text-decoration:none; 
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eh 

22. .test a:visitedf 

23. color:#666; 

24. text-decoration:underline; 

5 

26. .test a:hovert{ 

27. COlOr:#FEFF:; 

28. font-weight:bold; 

29. text-decoration:none; 

30. background:url (arrow on.gif) #F00 no-repeat 5px 12px; 


二 于 二 让 
首页 在 上 面 的 代码 中 第 4 行 我 们 加 入 了 中 文 注 释 ， 其 中 含有 
后 时 名 “ 标 ” 字 ， 下 查看 一 下 这 个 页 面 的 效果 ， 如 图 14-12 所 示 。 
技 相 和 人 因为 它 的 注释 中 含有 
们 这 个 问题 的 解决 办 法 是 : 
图 14-12 ” 带 有 标 字 的 中 文 注释 将 编码 格式 改 为 UTF-8。 
@ 将 这 些 有 问题 的 注释 删 掉 。 


下 面 我 们 去 掉 注 释 中 的 标 字 ，HTML 代 码 不 做 更 改 ，CSS 部 分 代码 只 将 第 4 行 的 中 文 注释 
部 分 的 “ 标 ” 字 去 掉 。 现 在 再 来 看 一 下 效果 ， 如 图 14-13 所 示 。 


首页 产品 介绍 本 22 后 : 因 技术 支持 立刻 购买 。 联系 我 们 


图 14-13 不 含有 “ 标 ” 字 中 文 注释 效果 


可 以 看 到 了 ， 页 面 显 示 出 来 我 们 所 需要 的 效果 ， 这 就 是 IE6 版 本 浏览 器 下 的 一 个 Bug: 
ANSI 编 码 的 CSS 文 件 中 ， 如 果 出 现 某 些 汉字 则 会 导致 CSS 出 错 ， 从 而 使 页 面 变 乱 。 
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本 节 将 重点 分 析 娱 乐 门户 网 站 的 首页 和 “店铺 ”页 面 的 设计 样式 ， 而 “店铺 列表 ”页 面 
因为 篇 幅 的 原因 ， 就 不 再 详细 分 析 了 ， 如 有 需要 ， 请 自行 从 光盘 中 获取 相关 页 面 文件 。 


娱乐 门户 网 站 


娱乐 门户 网 站 是 近 几 年 国内 热门 的 网 站 类 型 之 一 ， 介 绍 各 个 地 区 的 好 
玩 、 好 吃 的 地 方 。 其 成 功 运营 的 网 站 有 大 众 点 评 网 。 本 章 介 绍 的 玩 客 网 就 是 
一 个 针对 上 海地 区 娱乐 场所 的 信息 发 布 平台 。 

为 了 能 更 好 的 吸引 用 户 ， 网 站 除了 提供 信息 发 布 功能 ， 还 包括 用 户 博 
客 、 抽 奖 信息 、 社 区 等 多 种 方式 为 客户 互动 提供 支持 。 浏 览 玩 客 网 给 用 户 第 
一 印象 很 亮丽 ， 不 同 以 往 的 娱乐 门户 网 站 的 柔和 基调 。 这 种 视觉 冲击 ， 让 访 
问 网 站 的 用 户 产生 进一步 访问 的 期 望 。 至 于 网 站 的 受 欢 迎 程度 ， 要 取决 于 网 
站 的 运营 模式 、 服 务 、 互 动 平 台 和 推广 等 多 方面 因素 。 本 章 我 们 就 来 分 析 一 
下 这 类 网 站 的 实现 方式 。 


人 网 站 页 面 效果 分 析 


人 ES 首页 效果 分 析 


娱乐 门户 网 站 首页 的 布局 是 很 常见 的 三 行 样式 ， 其 中 ， 第 一 行 放置 网 站 Logo、 网 站 导 
站 内 搜索 等 几 个 部 分 的 内 容 ， 第 二 行 放置 “网 站 公告 ”、“ 娱 乐 指南 ”、“ 网 站 导航 ” 


航 、 
和 “ 


网 


站 广告 ”等 几 个 部 分 ; 第 三 行 放置 的 是 部 分 导航 、 版 权 信息 和 部 分 友情 链接 。 


首页 的 第 二 行 是 网 站 的 正文 部 分 ， 这 部 分 比较 复杂 ， 内 容 比 较 多 ， 所 以 截图 会 比较 长 ， 


导致 


图 


片 看 起 较 小 ， 如 图 15-1 所 示 。 


人 EDIV+CSS mmexsa —、， QQ———e--aqq00G59gy 
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图 15-1 首页 的 效果 
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LE 尼 入 “店铺 ”页 面 的 效果 分 析 
在 店铺 页 面 中 ， 放 置 某 个 店铺 的 详细 信息 
解 一 个 店铺 。 
这 个 页 面 也 采用 了 三 行 样式 ， 其 中 ， 第 


和 服务 信息 ， 通 过 这 个 页 面 ， 我 们 将 会 全 面 了 


和 页 脚 。 第 


长 ， 图 15-2 只 


行 放置 店铺 的 详细 信息 


只 显示 了 大 半 部 分 的 页 


团 


行 的 样式 与 首页 完全 一 致 ， 都 是 页 头 


RS 行 的 效果 图 ， 由 于 图 片 过 


地 址 ; 上 海 市 长 宁 区 水 城南 路 51 弄 
区 ( 古 北 康乐 福 对 面 钻石 
公 


查看 地 图 MAPt 
地 标 ; 其 它 

电话 : 13621613851 ( Ancy》 
欢乐 指数 :会 全 全 宙 宙 


巡 合 指数 ; 

好 乐 迪 量 岩 式 KTY( 松 江 店 ) 
综合 指数 : 

好 乐 迪 量贩 式 KTY( 过 监 店 ) 
综合 指数 : 

自由 洪 量 贩 式 KTY( 甫 清 店 ) 
锭 合 指数 : 


优惠 信息 :本店 暂 无 优惠 卷 


不 游 (35 元 位 ) 桌 游 (35 元 位 ) 


四 


i152 


店铺 页 面 的 效果 


四 
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人 | 有 DIV+CSS mmexsa Li 


[民有 网 站 文件 综述 


网 站 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代 码 ， 文 件 及 其 功能 如 表 15-1 所 示 。 


表 15-1 娱乐 门户 网 站 文件 和 目录 一 览 表 


| 模块 名 文件 名 功能 描述 
index.htm 首页 


页 面 文件 shop.htm 店铺 页 面 
shoplist.htm 店铺 列表 页 面 
[ss 隶 | 这 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
[scripts 目 录 | 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
i 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 


人 1.2 ”规划 首页 的 布局 


因为 需要 搭建 一 个 娱乐 门户 网 站 ， 所 以 网 站 首页 的 内 容 是 比较 多 的 ， 本 节 我 们 会 分 几 个 
部 分 介绍 网 站 的 首页 ， 下 面 就 依次 介绍 首页 中 重要 部 分 的 实现 方式 。 


搭建 首页 页 头 部 分 的 DIV 


首页 的 页 头 部 分 是 比较 重要 的 部 分 ， 它 包括 了 网 站 Logo 部 分 、 导 航 部 分 和 站 内 搜索 部 
分 ， 页 头 的 效果 如 图 15-3 所 示 。 


现 有 注册 商户 43 现 有 注册 用 户 8117 


图 15-3 ”首页 页 头 设计 分 析 图 


页 头 部 分 的 关键 代码 如 下 所 示 。 


1. <DIV id=logo> 

2 <DIV id=logo wen> 

KE 订 <P><SPAN id=Page headerl span name></SPAN><SPAN id=Page_headerl 
span login><IMG alt=" 登 录 " src="images/sy-sy-06.gif"> 

4. <Rhref="http://www.52wank.-com/login.aspxn>[ 登 录 ]</RA> 

5. <IMG alt= 玩 家 注册 src="images/sy-sy-07.gif">*…* </P> 
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人 <P style="MARGIN-TOP: 25PX"><RA href="#" target= blank; ;> 

7. <IMG alt=" 联 系 客服 " src="images/42 offline.gif" border=0></ 
A> gnbsp; gnbsp; <IMG style="CURSOR: hand" onclick=window.external. 
AddFavorite (location.href, document .title); 

8. src="images/shoucang.gif" border=0> 

9 <INPUT idq=Page_header1l_ LinkButtonl style="BORDER-TOP-WIDTH: Opx; 
BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: Opx" 

10. type=image src="images/myblo0g.jpg" name=Page headerl$LinkButtonl> 

rh </P> 

E> </DIV> 

3 <DIV id=logo tu><A href="http://www.52wank.com/Default .aspx"> 

14. <IMG id=Page header!1 Imagel style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT- 
WIDTH: Opx; BORDER-BOTTOM-WIDTH: Opx; WIDTH: 200px; HEIGHT: 80px; BORDER-— 
RIGHT-WIDTH: 0px" src="images/w-logo.gif"> </A></DIV> 

15. <DIV id=logo wen2> 

16. <P id=Page headerl p dianpu><IMG alt= 首 页 src="images/sy-sy-01.gif"><A 

17. href="http://www.52wank.com/default .aspx"> 首 页 </A> 

18 . <IMG alt= 店 铺 注册 src="images/sy-sy-02.gif"><A 

19. href="http://www.52wank.com/DianpuUserRegister.aspzx"> 注 册 商 铺 </A> <IMG 
alt= 店 铺 管理 src="images/sy-sy-03.gif">*…* </P> 

p41 必 </DIV> 

2 <ADEV> 

22 . <! 一 站 内 搜索 部 分 --> 

23. <DIV id=menu> 

24. <UL class=nav> 

芝 呈 E <LI><A class=naV_off id=mynav0 onmouseover=qiehuan (0) 

26. href="http://www.52wank.com/Default.aspx"><SPAN> 首 页 </SPAN></A> </LI> 

a <LI class=line></LI> 


28. ee 

过 3。 </UL> 

30. <DIV onkeypress="JavaSscript:return WebForm FireDefaultButton (event, 
'Page_ search btn Esearch')" id=Page search sou n><SPAN class=butt> 

31. <INPUT id=Page search txt ESearch style="VERTICAL-ALIGN: bottom; 
WIDTH: 150px; HEIGHT: 20px" name=Page search$txt ESearch> 

2 </SPAN> <SPAN class=butt> 

33. <INPUT class=clas id=Page search btn Esearch 


onkeydown=EnterSearchTextBox () style="BORDER-TOP-WIDTH: 0px; 
BORDER-LEFT-WIDTH: Opx; BORDER-BOTTOM-WIDTH: Opx; BORDER-RIGHT-WIDTH: 
Opx" onclick="JavaScript:return checkHtmlText () ;" type=image 
src="images/sousuo button.gif" name=Page search$btn EsSearch> 

34. <INPUT class=clas id=Page search btn Casual style="BORDER-TOP- 
WIDTH: Opx; BORDER-LEFT-WIDTH: Opx; BORDER-BOTTOM-WIDTH: Opx; 
BORDER-RIGHT-WIDTH: 0px" type=image src="images/suibian anniu.jpg" 
name=Page search$btn Casual></SPAN> 

35. <SPAN id=Page search search key style="ZOOM: 1">g&nbsp; 

36. <Ahref="http://www.52wank.com/show list.aspx?action=4%2fkdxRvF%2feI%3d 

&amp; select=h%2fFyxnYo71E%3d"> 咖 啡 </A>&nbsp; gnbsp*…. .</DIV> 
37. <DIV id=menu con> 


S60 
3 <DIV class=ts> 
40. <P style="MARGIN-TOP: 12px; MARGIN-LEFT: 300px; COLOR: #666666"> 上 玩 
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客 网 找到 最 近 ， 最 好 ， 最 实惠 的 玩乐 店铺 </P> 


41. </DIV> 
42. </DIV> 
43. </DIV> 


在 上 述 代码 中 ， 第 3 行 到 第 5 行 是 网 站 的 上 部 分 左边 导航 ， 第 6 行 到 第 11 行 是 联系 客服 等 导 
航 ， 第 14 行 是 网 站 的 Logo 部 分 ， 第 16 到 第 19 行 是 上 半 部 分 右边 的 导航 。 第 22 行 到 第 47 行 是 站 
内 搜索 部 分 ， 第 22 到 第 29 行 是 网 站 的 整体 导航 ， 第 23 到 第 36 是 网 站 的 搜索 部 分 。 


搭建 “第 一 列 ” 部 分 的 DIV 


首页 的 正文 部 分 可 以 分 为 三 列 ， 而 现在 将 要 搭建 就 是 首页 左边 第 一 列 的 部 分 ， 这 部 分 的 
效果 如 图 15-4 所 示 。 


图 15-4 ”正文 第 一 列 部 分 的 DIV 效果 图 


正文 第 一 列 部 分 的 广告 图 比较 多 ， 为 了 节省 篇 幅 ， 这 里 只 选 其 中 的 一 个 为 例 ， 其 关键 代 
码 如 下 所 示 。 


1. <DIVid=gonggao list> 

<TABLE cellSpacing=5 cellPadding=5 width="90%" align=center border=0> 
Se 

4. </TABLE> 

5 </DIV> 

6 <DIV id=left> 
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大 区 


了 <DIV id=dh> 

Be <DIV class=dh tou> 

9. <H1> 上 海 娱 乐 指南 </H1> 

85 </DIV> 

Ls <DIV class=dh nav> 

2 <UL id=d nav> 

了 3 <LI><A href="http://www.52wank.com/show list.aspx?action=channelg 


amp; select=1"> 
14. gnbsp; Enbsp; gnbsp; gnbsp; gnbsp; &nbsp; Enbsp; &nbsp; gnbsp; 球 类 运动 </A> 


1 <UL> 

LG <LI><A 

17. href="http://www.52wank.com/show list.aspx?action=category&amp;select 
=101"> 羽 毛 球 </A> </LI>*…*… 

Ee </UL> 

ED </LI> 

20 . Ce 

</UL> 

2 </LI> 

2 </UL> 

24. </DIV> 

人 25 <DIV class=shouye gg id=ad6><A href="http://www.52wank.com/536" 


26. target= blank><IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; 
BORDER-BOTTOM-WIDTH: Opx; BORDER-RIGHT-WIDTH: Opx" 

27. src="images/2010129193336.jpg"></A></DIV> 

De 

2 少 困 </DIV> 
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正文 第 一 列 部 分 由 网 站 公告 、 网 站 导航 和 广告 三 个 部 分 组 成 的 ， 其 中 ， 第 2 行 到 第 4 行 是 
网 站 公告 部 分 ， 这 部 分 由 DIV+TABLE 组 成 ， 第 6 行 到 第 24 行 是 网 站 的 导航 部 分 ， 这 里 只 给 出 
一 个 导航 作为 示例 ， 第 25 行 到 第 27 行 则 是 广告 部 分 。 


搭建 “标签 导航 ”部 分 的 DIV 


标签 导航 部 分 的 DIV 是 正文 第 二 列 的 第 二 部 分 ， 第 一 部 分 是 广告 部 分 ， 这 部 分 的 效果 
JS 实现 ， 拱 建 方法 比较 简单 ， 所 以 就 不 叙述 了 ， 效 果 如 图 15-5 所 示 。 


ee ) 二 


热门 分 类 


热门 标签 
拓 路 健身 | 茶室 | 咖 吧 | 酒吧 | 游艺 厅 | 网吧。 点 游 | 点 游 | DIY | 游戏 | 夏 面 游戏 | 酒吧 | 按 
1 于 机 房 DIY 制作 | 模 牧 类 | 点 游 | 其 它 | 高 摩 | 茶 | 健身 | 点 球 | 呆 畦 厅 | 茶室 | 公园 | 
尔 夫 | 网球 | 乒乓 球 | 桌球 | 藉 球 | 篮球 | 排 “休闲 | 工 坊 | 电影 | 
球 | 


热门 搜索 热门 地 区 
玩 D 屋 | 点 游 | 点 游 | 棋牌 | 会 所 | 酒吧 | 部 修 汇 区 | 静安 区 | 长 宁 区 | 阅 北 区 | 虹口 区 
落 | 晒 太 阳 吧 点 游 俱乐部 | 大 地 |ktv | 游艺 | ”杨浦 区 | 普陀 区 | 卢湾 区 | 黄 请 区 | 闵行 区 
足球 | 三 图 杀 | 玩 | 人 民 广场 | 桌 | 歌 城 | 网 “全 山区 | 南汇 区 | 奉 痪 区 | 松江 区 | 青 油 区 
吧 | 酒 | 量贩 | 咖 |D131 俱 乐 部 | 嘉定 区 | 浦东 新 区 
排行 榜 

最 热门 的 店铺 最 实 圳 的 店铺 服务 好 的 店铺 环境 好 的 店铺 


© (Fem) 


四 


图 15-5 ”标签 导航 部 分 DIV 的 效果 
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标签 导航 部 分 的 代码 如 下 所 示 。 


1. <DIV class=fenlei tou></DIV> 

pA <DIV id=fenlei> 

3 <DIV class=fenlei body> 

:了 <DIV class=fenlei kuang> 

i <DIV class=fenlei left> 

ER <H2> 热 门 分 类 </H2> 

了 <P><A 

8. href="http://www.52wank.com/show list.aspx?action=3N51hXjLDROs8IxPNnfIk 
Rs3ds3dg&amp; select=8jUDNXgVUYcs3d"> 舞 蹈 健身 

(Ep </P> 

hos </DIV> 

5 

1 </DIV> 

人 全 </DIV> 

1 <H2> 排 行 榜 </H2> 

5 <TABLE width=500> 

中 :总 <TBODY> 

Es <TR> 

18. <TD><A href="http://www.52wank.com/paihang .aspx?1ist=hot"> 最 热门 

的 店铺 </A></TD> 

19. oo 

20> </TR> 

2 </TBODY> 

22> </TABLE> 

“大全 </DIV> 


上 面 代码 只 给 出 “热门 分 类 ”部 分 DIV 的 代码 ， 而 “热门 标签 ”、“ 热 门 搜索 ”、“ 热 
门 地 区 ”等 部 分 的 代码 与 “热门 分 类 ”类 似 。“ 排 行 榜 ” 的 搭建 则 是 由 DIV+TABLE 组 成 的 ， 
这 里 就 不 做 说 明了 。 


人 铺 ” 外 DIV 


新 进 店 铺 部 分 的 DIV 是 正文 第 二 列 的 第 三 个 部 分 ， 这 部 分 主要 描述 了 新 进 店铺 的 一 些 详 
细 信 息 ， 效 果 如 图 15-6 所 示 。 


店铺 名 : 上 海德 共 智 点 游 吧 
地 址 : 闸北 区 大 了 路 535 弄 绿色 丽 园 17 号 302 室 ( 大 订 国 际 过 边 ) 6 近 共和 新 路 ) 
联系 方式 : 13585976986 13917453156 
点 击 次 数 : 16 
有 Hoo 


店铺 名 : 要 号 九 点 游 吧 
地 址 : 上 海 市 静安 区 硬 导 路 300 号 申 乐 大 厦 2105 室 


联系 方式 : 62522668 


图 15-6 ”新 进 店铺 部 分 的 效果 
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新 进 店铺 部 分 的 DIV 的 关键 代码 如 下 所 示 。 


1. <DIV class=new Shop> 

区 <DIV class=new Shopbt> 

<P> 新 进 店铺 </P> 

4 </DIV> 

De <DIV class=new_ shop k> 

6 <DIV class=new_ shop list> 

入 <DIV class=new shop list left> 

8 <P><A href="http://www.52wank.com/1137"><IMG 
9 


style="BORDER-TOP-WIDTH: Opx; BORDER-LEFT-WIDTH: Opx; BORDER-BOTTOM-- 
WIDTH: Opx; WIDTH: 80px; HEIGHT: 80px; BORDER-RIGHT-WIDTH: Opx" 


10. alt= 上 海德 益 智 桌 游 吧 src="images/null 120 120.gif"></A></P> 


DT </DIV> 

2 <DIV class=new shop list right> 

1 公国 <DIV class=new_shop jiben> 

i <P> 店 铺 名 : 上 海德 益 智 桌 游 吧 </P> 

i <P> 地 址 : 曾 北 区 大 宁 路 535 弄 绿色 丽 园 17 号 802 室 (大 宁国 际 旁边 ) ( 近 共和 新 路 ) </P> 
6 <P> 联 系 方式 : 13585976986 13917453156</P> 

1 <P> 点 击 次 数 : 16</P> 

18. </DIV> 

9 <DIV class=new_shop_button> 

20E <P><IMG 


21. style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: Opx; BORDER-BOTTOM- 


WIDTH: Opx; BORDER-RIGHT-WIDTH: Opx" 
22 . alt=QQ 联 系 店家 src="images/qq_null.gif"></P> 


23. </DIV> 
24. </DIV> 
25: </DIV> 
26.。 oo 

Ss </DIV> 
0- </DIV> 


上 面 给 出 了 一 家 新 进 店铺 的 搭建 代码 ， 其 余 店 铺 与 它 的 代码 类 似 ， 所 以 这 里 没有 全 部 给 


出 。 


在 上 述 代 码 中 ， 一 家 店铺 的 介绍 分 为 三 个 部 分 ， 其 中 ， 第 7 到 第 11 行 是 第 一 个 部 分 ， 显 示 
了 店铺 的 图 片 。 第 12 到 第 18 行 是 第 二 个 部 分 ， 包 含 了 店铺 名 、 地 址 、 联 系 方式 、 点 击 次 数 几 
个 部 分 。 第 19 到 第 23 行 是 第 三 个 部 分 ， 显 示 了 这 家 店铺 是 否 已 经 开通 了 QQ 在 线 功能 。 


搭建 “最 新 资讯 ”部 分 的 DIV 


最 新 资讯 部 分 是 第 二 列 的 最 后 一 部 分 ， 因 为 玩家 评论 部 分 会 在 店铺 页 面 9 
里 就 不 再 做 介绍 了 。 这 里 只 介绍 一 下 最 新 资讯 部 分 ， 其 效果 如 图 15-7 所 示 。 


ph 显 示 ， 所 以 这 
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瑟 。 [feedom 旧 入 加 玩 才 网 会 员 享 有 全 局 9 。 号 [ 蕉 格 桌球 ( 闫 开店] 不 际 25 元 小 时 
遍 训 来 店 更 有 奶 香 要 米 花 送 哄 - 本 店 会 员 推出 。 。 豆 。 [ 必 动 台球 俱乐部 点 球 。 … 30 元 小 时 
周一 至 周 四 一 元 R. 吾 (康定 路 。… 50 元 /小 时 
豆 “ 虽 2 Club 梨 游 生活 | 章 B2 Club 梨 游 生活 es 
所 是 和 提 扣 有 全 共和 [于 内 和 池 3 时 
B2Ch..... 

un 吾 [1 和 7 梨 球 俱乐部 ] 看 球 。 … 元 小 时 
H [上 海 汪 DIY 银饰 总 向 目前 市 场 出 现 一 TP 
此 以 省 质 国产 良 土 《 例如 松 川 ， 福 网， 或 一 些 也 [ 苑 梨 球 俱乐部 ] 昌 球 。 “入 元 小 时 
设 有 生产 地 址 的 银 土 ) 来 冒充 是 日 本 进口 
可 “出 训 足球 公园 ] 开 放 时 间 :周一 至 周 五 
900.2200 周 六 , 周 日 800-2200 妆 锦标 准 
周 .… 


se 


可 2010 人 才 招聘 全 避 姐 图 : 上 海 世 二 全 礼仪 小 姐 在 杭州 集中 培训 
可 2010 第 7 届 上 海 国际 户外 旅游 用 品 展览 会 被 性 后 精 踢 了 的 末 时 代 "玉女 " 

可 2010 世 博 特 许 礼 昌 采 购 大 全 可 姐 图 : 父 关 出 席 发 布 会 百 密 一 天 不 情 占 
可 2010 第 七 届 上 海 国际 模型 展 内 农 

豆 


中 国 (上海 ) 第 十 五 届 国 际 玩具 展 上 白 信 从 久 到 采访 宇 什么 
具 第 46 届 博览会 


图 15-7 最 新 资讯 部 分 的 DIV 效 果 


最 新 资讯 部 分 的 关键 代码 如 下 所 示 。 

1. <DIV class=gg_k> 

<DIV class=new_shop gonggao> 

3 <DIV class=newtou> 

4 <P> 店 铺 公告 </P> 

Ss </DIV> 

6 <DIV class=new_ shop 9g ti id=ggl> 
7. <DIV class=n s left> 

8 <DIV class=new nei> 

中 <P>&nbsp;&nbsp;<IMG 


10. style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM- 
WIDTH: Opx; BORDER-RIGHT-WIDTH: Opx" 

11. src="images/jiantou tu.gif">gnbsp;&nbsp; gnbsp; &nbsp; <A 

12. href="http://www.52wank.com/735">[freedom 桌 游 吧 ] 玩 客 网 会 员 享受 全 场 9 折 优惠 来 


店 更 有 奶 香 爆 米 花 送 哦 ~ 
13. 本 店 会 员 推 出 周一 至 周 四 一 元 R. ..... </A></P> 
ry 
ss </DIV> 
16. </DIV> 
下 </DIV> 
Las </DIV> 
TO 
200 /DIV 


上 面 只 给 出 了 搭建 “店铺 公告 ”的 代码 ， 其 余 三 部 分 的 搭建 方法 其 实 是 一 样 的 ， 只 要 把 
标题 和 内 容 改 掉 就 可 以 了 。 
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搭建 “第 三 列 ” 部 分 的 DIV 


正文 第 三 列 部 分 还 是 比较 长 的 ， 但 是 ， 它 的 样式 基本 差不多 ， 这 里 只 给 出 具有 代表 性 的 
两 个 DIV， 效 果 如 图 15-8 所 示 。 


生 [滨河 国际 SPA 休 闲 会 所 ] 
多 四 楼 后 座 ] 33 元 /人 畅游 
和 [fieedom 虑 游 吧 ] 全 场 9 折 忧 囊 


全 [山姆 小 馆 ] 16 元 畅 玩 、 四 大 … 


图 15-8 ”第 三 列 部 分 的 DIV 


第 三 列 部 分 DIV 的 关键 代码 如 下 所 示 。 


1. <DIV class=tui> 

ER <DIV class=re01></DIV> 

5 <DIV class=1ist> 

4. <TABLE cel1Spacing=0 cellPadding=0 width="90%" align=center border=0> 

5 <TBODY> 

6. <TR> 

<TD><BR> 

8. <DIV 

SS style="OVERFLOW: hidden; WIDTH: 170px; WHITE-SPACE: nowrap; TEXT— 
OVERFLOW: ellipsis"><IMG 

10. style="BORDER-TOP-WIDTH: Opx; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM- 
WIDTH: Opx; BORDER-RIGHT-WIDTH: 0PX" 

jE src="images/sy-sy-dd.gif"><A 

12. href="http://www.52wank.com/coupon show.aspx?Cid=220"> [ 佳 莉 雅 水 疗 中 心 .] 


TS 赁 此 券 可 以 抵 用 200 元 ， 此 券 只 用 于 面部 、 身 体 〈 足 部 除外 ) ; </A></DIV></TD> 
LS </TR> 

5. eve 

上 GE </TBODY> 

eT </TABLE> 

LB <DIV style="MARGIN-TOP: 10px; MARGIN-RIGHT: 15px" align=right><A 

19. href="http://www.52wank.com/coupon 1ist.aspx"> 更 多 </A> </DIV> 

ZO </DIV> 

2 </DIV> 
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上 面 只 给 出 了 优惠 券 部 份 的 代码 ， 其 余部 分 的 搭建 方法 与 此 类 似 ， 所 以 这 里 就 不 详细 说 
明了 。 

从 上 述 代码 可 以 看 出 ， 这 部 分 是 一 个 DIV+TABLE 的 组 合 搭建 方式 ， 这 里 由 于 模块 较 
小 ， 并 且 搭 建 在 DIV 中 ， 所 以 才 会 使 用 TABLE， 如 果 模 块 较 大 ， 我 们 不 建议 使 用 TABLE。 


双生 和 搭建 页 脚 部 分 的 DIV 
页 脚 部 分 包含 了 友情 链接 、 站 点 导航 和 流量 统计 ， 效 果 如 图 15-9 所 示 。 


ne 
上 滑 


图 15-9 页 脚 部 分 的 DIV 


页 脚 部 分 关键 的 实现 代码 如 下 所 示 ， 这 部 分 的 代码 比较 简单 ， 所 以 就 不 再 分 析 了 。 


<DIV class=foot> 

沁 <DIV style="MARGIN-LEFT: Spx; MARGIN-RIGHT: 5px"> 

3 <P> 友 情 链接 : <A href="#" target= blank> 重 庆 三 峡 旅游 </A> |<A 

4. href="#" target= blank>B2 桌 游 俱乐部 </A> 

号 <!----- // 代 码 略 ----- > 

.</P> 

A </DIV> 

8 <P><Ahref="http://www.52wank.com/aboutus/aboutus.html" target= blank> 
关于 我 们 </A> | <A href="http://www.52wank.com/aboutus/hezuo.html"> 
广告 服务 </A> 

9. <!---//// 导 航 代码 略 ----> 

Ti 请 </P> 

LI <P> 

12. <!----//JavaScript 代 码 略 ----> 

L320 2/P> 


14. </DIV>> 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 ， 我 们 将 用 表格 的 形式 描 
述 首页 里 其 他 CSS 效 果 ， 如 表 15-2 所 示 。 
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{ margin-left: Spx: 
margin-right: Spx; } 


表 15-2 首页 DIV 和 CSS 对 应 关系 一 览 

DIV 代码 CSS 描 述 和 关键 代码 效果 图 

定义 宽度 和 内 边 距 

.fenlei left 基 门 分 和 

- 颖 中 健身 | 茶室 | 咖 吧 | 酒吧 | 游艺 厅 | 网吧 
.| {width: 250px; 
<DIV class=fenlei 
float: left: } 

left> 

.fenlei leftp 


<div class="desc"> 


<div id='InfoList> 


定义 文字 如 果 超 过 自动 换行 
new_shop jiben 
{ width: 420px:; 

height: 100%; 

overflow: auto; 
} 
定义 字体 若 超 过 限制 则 自动 截 
取 ， 并 加 上 省 略 号 
#InfoList { 

OVERFLOW:hidden: 

WIDTH:170px; WHITE- 
SPACE:nowrap; TEXT- 
OVERFLOW: ellipsis} 


店铺 页 面 


项 列表 和 点 记 
的 实现 方式 。 


列表 等 内 容 ， 页 面 内 容 比较 多 ， 我 们 本 


商铺 资料 部 分 的 DIV 


商铺 资料 部 分 的 DIV 的 效果 如 


图 | 


15-10 所 示 。 


| 点击 次 数 :67 


文字 若 超 过 限 


制 ， 自 动 换 行 FADOc 


rE 


全 院 河 国际 SPA 休 闲 会 多 人 项 
Y#D 树 定义 字体 超过 
辣 限制 后 的 样式 


主要 包括 商铺 资料 、 店 铺 列表 、 店 铺 简介 、 小 店 一 角 、 活 动 列表 、 公 告 娱乐 


点 介绍 一 下 商铺 资料 和 商铺 推荐 部 分 
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12 号 乙 102 室 ( 古 北京 乐 福 对 面 外 
公寓 ) 


查看 地 图 MAPE 
地 标 : 其 它 
电话 : 13621613851 ( Andy ) 


网 
列 


15-10 ”商铺 资料 效果 


上 图 列表 区 域 包含 在 名 为 menuitem 的 容器 内 部 ， 使 用 h3 显 示 标 题 ， 代 码 如 下 所 示 。 


1. <DIVclass=shop zi> 

人 2 <DIV class=shop tou> 

3 <DIV class=shop_ tu><IMG id=B_ Logo height=120 

4. src="images/2010129193336.jpg" width=120 

5. border=0></DIV> 

6 </DIV> 

1 <DIV class=shop nei> 

8 <DIV class=shop nei h2> 

9. <H2 id=Bnameh2> 玩 O 屋 </H2> 

Ts <H3> 地 址 : <SPAN id=Baddressh3 

11. style="TEXT-ALIGN: left"> 上 海 市 长 宁 区 水 城南 路 51 弄 12 号 乙 102 室 ( 古 北 家 乐 福 对 面 钻 
石 公寓 ) </SPAN> </H3> 

上 25 <H3 class=map><A href="#" target= blank> 查 看 地 图 </A> 

13. gnbsp;<IMG style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER- 
BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: Opx" 

14.alt="" src="images/map.gif"></H3> 


:让 <H3> 地 标 : <SPAN id=Bdibiaoh3 style="TEXT-ALIGN: left"> 其 他 </SPAN> </H3> 
16. <!---// 代 码 风格 同上 ------ > 

下 7 3 

下 SS <P 


19. style="MARGIN-TOP: 5px; FONT-WEIGHT: 800; FONT-SIZE: 14px; MARGIN-BOTTOM: 
Spx; COLOR: #ff0000; TEXT-ALIGN: center"> 人 均 : <SPAN id=aveprice>37.7</ 
SPAN> 元 /人 </P> 
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> Style 
. onclick="return zixun (536); if (typeof (Page Clientvalidate) == 'function') 


<H3> 欢 乐 时 间 : <SPAN id=hlTime></SPAN></H3> 
< !----//// 代 码 略 ---> 
<DIV style="MARGIN-LEFT: 5px"></DIV> 
</DIV> 
<DIV class=zixun> 
<DIV style="MARGIN-BOTTOM: 3px; TEXT-ALIGN: center"> 
<INPUT id=btnZiXun 
CURSOR: hand" 


Page Clientvalidate('');" 


- type=image alt= 咨 询 店家 src="images/zixun.gif" 
. name=btnZiXun> 


</DIV> 
<DIV style="TEXT-ALIGN: center"><A 


. href="tencent://Message/?Uin=5766384l&amp;websiteName=q-zone. 


qq:com&gamp; Menu=yes"><IMG 


. Style="CURSOR: hand" src="images/qq lianxi.gif" 
. border=0></A> </DIV> 


38 . 


</DIV> 
</DIV> 
</DIV> 


这 里 使 用 的 样式 代码 比较 多 ， 我 们 挑选 部 分 显示 给 大 家 ，CSS 代 码 如 下 所 示 。 


Ws 
3 


3. 
4. 
35 


在 
hs 
8. 
9 
10 
11 
2 


E35 


14. 
15. 
Gs 
全 
18 . 
人 
20. 


.Shop{ width: 200px;} 

.Shop ht{ background-image: url(../images/shop-hl .gif); background- 

repeat: no-repeat; 

} 

.shophlt{ 
font-size:12px;color: #0000FF;height: 20px;line-height: 20px;text-— 
align: center;font-weight: 400; 

上. 

39hop zi 

| 
border: #F9DEAC lpx solid; 

} 

-Shop_ tou 

{width: 160px; margin-left: auto; margin-right: auto; margin-top: 5px; 
height: 180px; background-image: url(../images/shop-tou.gif); 
background-repeat: no-repeat;} 

.Shop tu{ width: 120px; margin-top: 30px; margin-right: auto;} 

.Shop nei h2{margin-top: 5px;} 

.Shop nei h2 h2{ text-align: center; font-size: 14px; font-weight: 400; 


margin-top: 3px; margin-bottom: 3px; font-weight: 800; color: #0033FF; } 


.mapa:link, .mapa:visited{color:Blue; } 
.map a:hovert{ color:Red;} 


/***// 这 里 的 样式 省 略 *****/ 


商铺 推荐 部 分 的 DIV 


证 
邯 
当 


右边 是 商铺 推荐 部 分 ， 如 图 15-11 所 示 。 
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二 , 锋 ， 


图 15-11 ”商铺 推荐 效果 图 


实现 商铺 推荐 部 分 的 DIV 代码 如 下 所 示 。 


Es 
2 
3 
4. 
5 
6. 
和 
8. 
Ds 


<DIV id=shop tui> 
<DIV class=shop t h> 
<H1> 商 铺 推 荐 </H1> 
</DIV> 
<DIV class=tui kuang id=div tuijian> 
<DIV class=dt tui 
style="MARGIN-TOP: 3px; FLOAT: left; WIDTH: 172px; TEXT-ALIGN: center"><A 
onmouseover=showPreview (event); onmouseout=hidePreview (event); 
href="http://www.52wank.com/536#"><IMG height=150 alt="" 


10. src="images/536 item 2010129183058.jpg" width=150 


二 


border=0 pic-link="#" 


12. large-src="images/536 item 2010129183058.jpg"></A> 
43 


14. 
Ee 
16. style="MARGIN-TOP: 3px; FLOAT: left; WIDTH: 172px; TEXT-ALIGN: center"><A 
17. onmouseover=showPreview (event); onmouseout=hidePreview (event); 

18. href="http://www.52wank.com/536#"><IMG height=150 alt="" 

19. src="images/536 item 2010129185632.jpg" width=150 

20. border=0 pic-link="#" 


<P style="MARGIN-TOP: 3px; FONT-SIZE: 12px; MARGIN-BOTTOM: 5px"> 桌 游 
(35/ 位 ) </P> 

</DIV> 

<DIV class=dt tui 


21. large-src="images/536 item 2010129185632.jpg"></A> 
2 <P style="MARGIN-TOP: 3px; FONT-SIZE: 12px; MARGIN-BOTTOM: 5px"> 桌 
游 (35 元 /位 ) </P> 

过 3 </DIV> 

24. <!-----// 其 他 推荐 项 代码 略 ------- > 

2 <DIV id=div_noshow 

26. style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-— 
WIDTH: Opx; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; BORDER-RIGHT-WIDTH: 
Opzx"></DIV> 

el </DIV> 

28 </DIV>> 

上 面 代码 使 用 DIV 进行 自 上 而 下 的 布局 ， 下 面 我 们 只 列 出 关键 的 样式 说 明 。 

1. #shop tuif 
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2. min-height: 185px; 

3. 3} 

4. #shop tui hil{ 

3 font-size: 12px; 

人 Color: #FF0000; 

Te font-size: 12px; 

85 font-weight: 400; 

9. height: 20px; 

10. line-height: 20px; 

11. margin-left: 40px; 

2 

13. .shop 七 hf 

14. background-image: url(../images/shop-tui.gif); 
15. background-repeat: no-repeat; 
Gh 

17. .tui kuang{ 

18. width: 688px; 

19. border: #F9DEAC lpx solid; 

20. min-height: 170px; 

2 


在 上 面 CSS 代 码 中 ， 通 过 对 shop_tui 设 定 min-height 指 定 高 度 为 185 像 素 ， 而 shop_t_h 标 识 
的 标签 定义 了 外 链 图 片 ， 并 且 指 定 图 片 不 平 铺 。 
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旅游 酒店 网 站 


现在 人 们 旅游 时 的 选择 不 再 局 限于 旅行 社 ， 自 费 游 已 经 形成 一 种 时 尚 ， 
但 是 自费 游 到 哪 玩 、 怎 么 玩 、 住 哪里 ， 又 成 为 出 游 的 一 种 阻碍 ， 这 就 导致 了 
旅游 酒店 网 站 的 产生 ， 这 类 网 站 的 出 现 ， 充 分 解决 了 自费 游 去 哪 玩 、 怎 么 玩 
等 难题 。 

为 了 更 好 地 吸引 客户 ， 网 站 提供 的 信息 一 定 要 最 新 的 ， 最 受 自费 游 消费 
者 欢迎 的 ， 而 且 又 要 有 自己 推荐 的 酒店 或 景点 ， 从 而 达到 盈利 目的 ， 本 章 将 
详细 介绍 这 一 类 网 站 的 实现 方式 。 


16.1 网 站 页 面 效 果 分 析 


本 节 将 重点 分 析 旅 游 酒店 网 站 的 首页 和 “酒店 推荐 ”页 面 的 设计 样式 ， 而 “景点 推荐 ” 
页 面 的 风格 和 “酒店 推荐 ”页 面 类 似 ， 所 以 就 不 做 详细 分 析 了 。 


人 [用 首页 效果 分 析 


旅游 酒店 网 站 的 首页 布局 是 比较 常见 的 三 行 样式 ， 其 中 ， 第 一 行 放置 横幅 广告 ， 语 言 ; 
择 导 航 、 网 站 导航 等 几 部 分 内 容 ， 第 二 行 放置 “推荐 景点 ”、“ 最 新 新 闻 ”、“ 在 线 订 票 ” 
等 几 个 较 大 的 部 分 ， 第 三 行 放置 部 分 导航 、 版 权 相 关 、 友 情 链接 、 网 站 Logo 和 网 站 问题 等 
部 分 。 

第 二 行 正文 部 分 主要 分 为 “推荐 景点 ”、“ 最 新 新 闻 ”、“ 在 线 订 票 ”、“ 热 门 旅游 专 
题 ”、“ 游 玩 指南 ”和 “推荐 旅游 线路 ”等 几 个 部 分 内 容 。 

首页 的 效果 如 图 16-1 所 示 。 


第 16 章 放 洛 酒店 网 站 


[TEFL FE 快速 寻 藤 ”> 关 于 壬 们 ”> 联系 我们 


杭州 大 明山 庄 * 大 明山 门票 对 
游 同 庄 看 表演 送 密 月 酒店 2 
杭州 第 一 世界 大 酒店 您 享 春日 度 息 套 
餐 


中 华 区 龙 周 库 交 苏 克 一 日 游 上海 出 
发 ) 
中 华 巧 龙 园 库 克 苏 克 一 日 游 (上 海 出 
发 
车 陀 山 礼佛 7 日 超 全 品质 游 ( 上 海 出 
发) 
》 更 多 推荐 景点 E 
热门 旅游 专题 
i 去 宁波 拷 儿 乐 东方 夏威夷 厦门 
A 地 该 事物 因 ) rmaens } 
》 世 二 三 
泰国 火热 旅游 线 Ut 
> 世博 来 临 ， 怎 么 游 上 海 ?一 日 探险 常州 肪 龙 园 看 完 世博 周游 上 海 
术 路 年 和 党 放下 龙 但 间 上 海天 人 竹 亿 } 
参与 投票 
查看 投标 
发 表 评 论 
精品 依 薄 镇 敌 
需 你 畅 芥 章 国 上 


旅游 推荐 网 @ 2010 保留 一 切 权利 


同 站 帮助 - 订 票 帮助 - 注册 帮助 - 搜索 帮助 - 法 律 帮 助 


我 有 意见 ， 应 该 怎么 提 ? 会 有 反馈 加? 我 相投 诉 应 该 怎么 办 网 站 的 团队 吗 ? 我 是 景区 负责 人 怎样 与 网 站 合作 
寻找 最 合适 的 怎样 取 票 游玩 


旅游 网 导游 网 经 典 网 风景 网 外 出 网 旅游 导游 网 游 天 下 玩乐 吃喝 天 下 游 网 外 游 网 酒店 网 饭店 网 出 洲 天 下 吉祥 游 


| 
| 


16-1 首页 的 效果 


“酒店 推荐 ”页 面 的 效果 分 析 


在 酒店 推荐 页 面 中 ， 将 放置 各 城市 酒店 导航 、 酒 店 搜索 和 网 站 推荐 酒店 等 部 分 内 容 ， 通 
过 这 个 页 面 ， 显 示 各 个 酒店 的 详细 信息 。 

这 个 页 面 也 采用 了 三 行 样式 ， 其 中 ， 第 一 行 和 第 三 行 的 样式 与 首页 完全 一 致 ， 都 是 页 头 
和 页 脚 ， 而 第 二 行 由 酒店 导航 和 推荐 酒店 等 模块 组 成 ， 第 二 行 的 效果 如 图 16-2 所 示 。 


如 
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QQQ、 | 精通 DIV+CSS mi# 式 5 布局 


ED 


包含 酒店 导 推荐 酒店 列表 推荐 的 酒店 
航 和 酒店 接 -上 。 | | 上 海中 乱世 午 汇 大河 详 帮 外 总 
> 上 三 多 后 上 海中 福 世 往 江 大 酒店 简 介 
“十 海 斯 格 成 铂 尔 县 大 酒店 ES 
。 忽 江 之 星 的 四 i 地 外 交通 主 
站 


。 上 海 新 四 记过 
。 申花 过 全 酒 后 表 十 分 
可 168 而 的 各 娃 。 又 津 这 着 二 十 一 世纪 抽 现 代 气 和 


上 海 海港 宾馆 

> 北京 酒店 二 酒店 开业 时 间 2004 年 ， 楼 高 31 层 ， 客 房 总 数 503 癌 ( 套 ) 

学 广州 酒店 坟 剖 华西 班 于 式 家 具 ，1.8/1.5 米 大 床 。 部 分 客房 配备 三 角 洛 并 、 独 立 式 按摩 六 洛 设 施 及 滚 晶 电 [> 
> 三 亚 酒店 脑 , 提供 宽带 上 网 


上 海 兴 宁 大 酒店 

上 海 兴 宁 大 酒店 一 一 《 原 东 莱 大 酒店 ) 简介 

PAM 原 东 莱 大 酒店 ) 是 一 人 

多 人 。 酒店 权 

人 

全 面 季 书 服务 

酒店 开业 时 间 2009 年 5 月 ， 样 高 14 层 ， 客 房 总 数 192( 同 ) 天。 

锦 了 江 之 星 ( 上 海陆 家 嘴 店 》 

锦江 之 星 ( 上 海陆 家 哈 店 ) 简介 

人 
全 融 商 务 中 心 ， 位 于 浦 电 路 清城 路 交叉 口 ， 舍 恒 滨 江 花 园 对 面 ， 地 理 位 

,交通 便 殷 ， 距 泵 方 明 奈 、 金 蕊 大厦 、 延 安 踊 送 道 的 10 分 钟 车 程 ， 
琵 示 道 4 号 、6 号 缮 汪 电 路 站 步行 区 15 分 名 
少 酒 店 开业 时 间 2008 年 ， 释 高 5 层 ， 客房 总 数 247 间 ( 套 ) - 


图 16-2 ”酒店 推荐 页 面 的 效果 图 


人 LE 网 站 文件 综述 
网 站 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 三 个 目录 分 别 保存 网 站 所 用 到 的 图 
片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 16-1 所 示 。 
表 16-1 旅游 酒店 网 站 文件 和 目录 一 览 表 


功能 描述 


页面 人 河和 
[ohm | 如 失 丙 


css 目 录 这 下 所 有 扩展 名 为 cvs 的 文件 本 网 站 的 样式 表 文件 
[js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaSeript 脚 本 文件 | 
limg 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 | 


16.2 ”规划 首页 的 布局 


因为 需要 搭建 的 是 一 个 旅游 酒店 网 站 ， 所 以 首页 的 布局 就 比较 重要 了 ， 本 节 将 依次 讲述 
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首页 导 


搭建 首 


首页 


部 分 的 实现 方式 。 


页 页 头 部 分 的 DIV 


页 头 是 比较 重 


果 如 图 16-3 所 示 。 


要 的 部 分 ， 包 括 广告 部 分 、 网 站 导航 部 分 和 语言 选择 部 分 ， 页 头 的 效 


快速 导航 。 > 关于 我 们 。 ”> 联系 我 们 


网 


<div class="toolbar"> 
<ul class="flags"> 
<1i><img border="0" src="img/home/drapeau fr.gif" /></1i> 


16-3 ”首页 页 头 设计 分 析 


网 


， 页 头 的 关键 代码 如 下 所 示 。 


<div id="bloc not ident" class="ident"> <strong> 快 速 导航 </strong><a 
href="#">&gt7 关 于 我 们 </a> <a href="#">&gt; 联系 我 们 </a> </div> 


<div id="flash" class="bottom border"> 
<img src="img/974100.jpg" width="974" height="100" /> 


<1i class="home ibis"> 
<ahref="index.html"><img src="img/bt bando accueil.gif" /> 


面 代码 中 ， 第 3 到 第 6 行 是 网 站 的 语言 选择 部 分 ， 第 7 行 是 上 导航 部 分 ， 第 9 到 第 11 行 


页 头 的 广告 部 分 比较 显 
1. <div id="header"> 
2 
过 
和 
和 
6 </ul> 
7 
8. </div> 
人 
Li 
Le </Aiyv> 
12. <divid="menu"> 
3 <ul> 
让 
L159 
16: </a> 
Ee </1i> 
0 ams 
1 </ul> 
20. </div> 
21. </div> 
在 上 
是 广告 部 


上 搭建 “推荐 景点 ”部 分 的 DIV 


景点 部 分 是 了 


网 


16-4 所 示 。 


FE 文部 分 的 第 一 个 部 分 ， 这 部 分 主 


分 ， 第 12 到 第 20 行 是 下 导航 部 分 。 其 中 ， 语 言 选择 部 分 和 下 导航 部 分 都 使 用 ul+li 搭 
建 而 成 ， 而 且 都 以 图 片 代 蔡 文 字 来 搭建 的 。 


要 内 容 就 是 网 站 推荐 的 景点 ， 效 果 如 
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人 GEDIV+CSSmmresna I 


推荐 景点 部 分 
杭州 大 明山 


匡 周 庄 看 表演 送 守 月 酒店 2? 人 套餐 
杭州 第 一 世界 大 酒店 悠 享 春日 度 息 套 
均 


中 华 兢 龙 园 库 克 苏 克 一 日 落 ( 上 海 出 
发 ) 

中 华 严 龙 园 库 克 苏 克 一 日 蓄 (上海 出 
发 】 

普陀 山 礼佛 2 日 起 值 品质 还 (上海 出 
发 ) 

上 更 多 推 大 景点 

> 更 多 热 奈 晤 点 


图 16-4 ”推荐 景点 部 分 的 DIV 效果 图 


推荐 景点 部 分 的 关键 代码 如 下 所 示 。 


1. <divid="s engage" class="block"> 

之 <div class="corner"></div> 

3 <h2><span> 特 别 推荐 </span></h2> 

4 <div class="content"> 

3s <ul> 

6 <1i><a href="#"> 杭 州 大 明山 庄 + 大 明山 门票 双人 套餐 </a></1i> 
7 

8 <li class="environnement"> 

9 <a href="#" target=" blank" > 更 多 推荐 景点 </a></1i> 
oO <li class="qualite"><a href="#"> 更 多 热卖 景点 </a></1i> 
els </ul> 

2 </div> 

13. </div> 


在 上 面 代码 中 ， 推 荐 景点 部 分 主要 由 ul+li 有 序列 表 组 合 而 成 ， 这 种 组 合 方式 在 网 站 中 比 
较 常见 。 其 中 ， 第 4 行 引 用 了 一 个 content 样 式 ， 这 个 CSS 定 义 了 推荐 景点 的 字体 大 小 和 字体 样 


式 ， 代 码 如 下 所 示 。 


由 


Oop 


#5s_engage .content .environnement av 
#5s_engage .content .environnement a:hover, 
#5s_engage .content .qualitea, 

#5s_engage .content .qualite a:hover 


padding-left: 23px; 
font-size: 13px; 
font-weight: bold; /* 定义 字体 为 粗 体 */ 


letter-spacing: 07 


10. word-spacing: 0; 


1 


搭建 “最 新 新 闻 ” 部 分 的 DIV 


最 新 新 闻 部 分 是 了 
图 16-5 所 示 。 


E 文 言 


分 的 第 二 个 部 分 ， 这 部 分 的 主要 内 容 是 网 站 的 最 新 新 闻 ， 效 果 如 
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变 与 不 变 交 织 着 这 座 已 经 崛起 的 国际 
化 大 都 市 。 苦 日 的 石 库 门 … 


第 16 章 ”旅游 酒店 网 站 


图 16-5 ”最 新 新 闻 部 分 DIV 的 效果 图 
最 新 新 闻 部 分 的 代码 如 下 所 示 。 
1. <div id="newsletter" class="block"> 
法 <div class="corner"></div> 
3 <div id="b newsl"> 
4 <div class="b newsl ht"> 
5. <h2><span> 新 闻 公告 </span></h2> 
6 <span class="plus info"> 
网 <ahref="#" target=" blank"> 
8. 更 多 新 闻 
9 </a> 
DO </span> 
Ll </div> 
2 <div class="content"> 
3 <p> 
LA 变 与 不 变 交 织 着 这 座 已 经 崛起 的 国际 化 大 都 市 。 昔 日 的 石 库 门 . . . 
WDE </p> 
16. <input class="button" type="image" src="img/newsletter button.gif™" 
alt=" 详 细 " /> 
人 </div> 
8 </div> 
Ee </div> 
20. <div class="oas_bottom"> 
上 <img src="img/12566378782.gif" border="0" /> 


2 </div> 


上面 代码 可 以 看 出 ， 这 前 
式 有 所 不 同 。 


分 的 搭建 方法 与 推荐 


搭建 “游玩 指南 ”部 分 的 DIV 


旦 占 立 | 
景点 半 


分 很 相似 ， 只 不 过 使 


的 字体 样 


游玩 指南 部 分 的 效果 和 火热 旅游 线 的 效果 差不多 ， 但 搭建 方法 不 一 样 ， 火 热 旅游 线 只 是 


一 张 图 片 ， 而 游玩 指南 则 是 用 DIV 搭 建 而 成 的 ， 这 商 


分 的 效果 如 图 16-6 所 示 。 
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GEDIV+CSSmmrxsna IE 


世 二 三 日 精华 搓 营 语 * 


您 设 有 看 到 过 的 世 请 参考 ? 
> 世间 未 心 。 怎么 六 上 诲 ?一 日 
和 划 效 路 生 和 朱 
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图 16-6 ”游玩 指南 部 分 的 DIV 效果 图 


游玩 指南 部 分 的 搭建 方法 与 最 新 新 闻 部 分 类 似 ， 关 键 代码 如 下 所 示 。 


1. <divid="last info" class="block"> 

2 <div class="corner"></div> 

Be <div class="content"> 

4 <h2><a href="#"><img src="img/dernieres infos.gif" class="noMarge" 
/></a><span>Dernieres infos</span></h2> 


3 <img class="visuel capitale" src="img/home/couverture guide 2009.gif"/> 
6 <!——BlocHome Decouvrez > 

Ms <div class="noheto-news"> 

8 <ul> 

人 <li><a href="#" target=" blank"> 世博 三 日 精华 携带 版 ! <br/> 
EOE </a></1i> 

11。 oo 

Dy </ul> 

3s </div> 

TAs <ul> 

IE <1i> <a href="#"> 世 博 来 临 ， 怎 么 游 上 海 ? 一 日 游 线路 征集 </a> 

V6s <ul> 

六 <1i><a href='#' > 参与 投票 </a></1i> 

18。 ee 

ES </ul> 

20 </li> 

忆 仁 </ul> 

a </div> 


之 3 </div> 


搭建 “在 线 订 票 ”部 分 的 DIV 
在 线 订 票 部 分 含有 景点 查询 ， 这 部 分 的 效果 如 图 16-7 所 示 。 


全 人 住 线 训 守 


在 线 订 票 部 分 


图 16-7 在线 订 票 部 分 的 效果 
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在 线 订 票 部 分 的 关键 代码 如 下 所 示 。 


i 和 
ee 
3 
4. 
ee 
Gs 
i 
8. 
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34. 
35s 
36- 
37< 
38. 
39- 
40 . 
41. 
42. 
43. 


<div id="search" class="block"> 


<hl><a href="# "><span> 选 择 路 线 </ span></a></h1> 
<div class="content"> 
<div class="ss block speed"> 
<h3><span> 搜 索 查询 </span></h3> 
<div class="prix"><a href="#"> 
<span>Meilleur prix garanti</span></a></div> 
<input name="hotel ou ville" id="hotel ou ville label" 
class="hotel" type="text" value=" 路 线 、 酒 店 、 目 的 地 " /> 
<divid="hotel ou ville update" class="update" style="display: 
none;"></div> 
<p class="option facultative"><span> 查 询 车 次 </span></p> 
<div id="stay-dates"> 
<div class="ss block"> 
<label for="arrivee"> 目 的 地 </1label> 
<input type="text" name="arrivee" id="arrivee" /> 
</div> 
<div class="ss block"> <img id="date arrivee img" src="img/home/ 
calendrier.gif" /></div> 
<div class="ss block"> 
<label for="nb_nuit"> 班 次 </label> 
<select> 
<option selected="selected"> 一 </option> 
</select> 
</div> 
<div class="clear left"></div> 
<div id="depart"> <span> 票 务 查询 :</span> <span class="jour"></span> 
<span class="date"></span> </div> 
<div class="porteur de carte"> 
<input type="checkbox" name="checkboxAvantage" 
id="checkboxAvantage" value="1"/> 
<label for="checkboxAvantage"> 是 否 需 要 当天 回程 票 (如 需要 请 选择 ) </1label> 
<div class="clear left"></div> 
</div> 
</div> 
<div class="annulation"> <a href="#"> 确 认 后 进入 在 线 订 票 系统 </a> 
<button type="submit" id="bouton validation" class="find 
button"><span> 在 线 订 票 </span></button> 
<div class="clear both"></div> 
</div> 
</div> 
<div class="ss block advanced"> 
<h3><span> 全 球 通用 </span></h3> 
<a href="#"><img src="img/recherche avance carte.gif" /></a> 
<ul> 
<1i><a href="#">&gt; 在 线 订 票 流程 </a></1i> 


</ul> 
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44. </div> 

45. <div class="clear both"></div> 
46. <div class="corner"></div> 

47. </div> 


48. </div> 


在 上 面 代 码 中 ， 第 2 行 到 第 23 行 是 景点 查询 部 分 ， 第 24 行 到 第 27 行 是 在 线 订 票 部 分 。 


[到 搭建 “热门 旅游 专题 ”部 分 的 DIV 


热门 旅游 专题 部 分 由 五 组 文字 和 一 组 图 片 组 成 ， 这 五 组 文字 包含 了 门票 、 游 玩 指 南 、 景 
区 、 论 坛 等 几 个 部 分 ， 效 果 如 图 16-8 所 示 。 


热门 旅游 专题 


去 宁波 找 儿 乐 东方 夏威夷 厦门 
订 该 台 戈 和 尔 动物 园 厦门 船 游 金门 岛 


看 完 世博 周游 上 海 


[热门 旅游 专题 部 分 -上 半天 人 人 证 


图 16-8 热门 旅游 专题 部 分 的 DIV 


部 分 的 关键 代码 如 下 所 示 。 


<div id="week end" class="block"> 
<div class="corner"></div> 
<div class="content"> <a href="#"> 
<h2><span> 旅 游 专题 </span></h2> 
</a> <a href="#"> 
<h2 class="tit offres_speciales"><span> 热 门 推荐 按 </span></h2> 
</a> 
<div class="ss block"> 
<div id="long we" class="offres"> <a href="#"> <span class="name"> 
东方 夏威夷 厦门 </span></a> 
10. <div id="pushPromosHome 3n" class="pushPromosHome 3n"></div> 
hE <span class="details"><a id="link hotel 3n" href="#"> 厦 门 船 游 金门 岛 
</a></span></div> 
2 </div> 


ownamwm 必 sw 


14. </div> 


在 上 面 代码 中 ， 四 个 专题 部 分 是 一 样 的 ， 代 码 只 给 出 一 个 专题 的 实现 作为 示例 ， 其 余部 
分 的 代码 可 以 在 光盘 中 找到 。 


搭建 页 脚 部 分 的 DIV 
分 包含 了 网 站 业务 推广 和 网 站 导航 两 个 部 分 ， 效 果 如 图 16-9 所 示 。 


Dk 


页 脚 
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图 16-9 页 脚 部 分 的 DIV 


页 脚 的 两 个 部 分 包括 关于 我 们 、 关 于 网 站 合作 等 内 部 都 使 用 了 子 列表 项 来 实现 ， 具 体 代 
码 如 下 所 示 。 


1. <div idq="footer"> 

2. <div class="1ogo"><ahref="index.html"><img src="img/home/logo _ibis 
footer.gif" /></a></div> 

3. <div class="main links"> 


4. <ul> 

Ba <1i><a href="#"> 关 于 我 们 </a></1i> 

6. < 

is <ul class="simple"> <!---—-—- // 每 一 大 项 内 包含 的 子 项 列表 ------- > 
8。 <1i><a href="#" > 关于 网 站 </a> </1i> 
各 3 

Ps </ul> 

ks </1i> 

lL </ul> 

Ls <ul> 

J <1i class=""><a href="#"> 关 于 网 站 合作 </a></1i> 
Es <1i> 

到 6 <ul class="double"> 

7 <1i><a href="#"> 景 点 合作 </a></1i> 
18. <1===/7 代 码 省 略 ===== > 

Le </ul> 

2 <ul class="simple"> 

2 便 <1i><a href="#"> 媒 体 合作 </a></1i> 
228 <!---// 代 码 省 上 略 -一 - > 

23s </ul> 

24. </LL> 

Ss </ul> 

26. </div> 


27. <div class="1inks"> 

28 . <ul class="basic"> 

29. <li class="lienIbisRestaurant"> 旅 游 推 荐 网 tcopy; 2010 <a href="#"> 
保留 一 切 权 利 </a><br /> 

30< <br /> 

hs < 

3 <1i> <a href="#"> 网 站 帮助 </a></1i> 


33. von 
34. </ul> 

35> <ul class="hotels"> 

36. <1i><a href="#" target=" blank" > 旅游 网 </a></1i> 
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E <!---// 其 他 项 代码 略 --> 
38. </ul> 
S90 /dv 
40. </div>> 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 代 码 ， 本 小 节 将 用 表格 的 形式 描述 首 
页 中 其 他 CSS 的 效果 ， 如 表 16-2 所 示 。 


表 16-2 首页 DIV 和 CSS 对 应 关系 一 览 表 


DIV 代码 CSS 描 述 和 关键 代码 
<divclass="b_newsl_ht">| 定 义 整 块 区 域 的 背 
<h2><span> 新 闻 公 告 </span></|.b_newsl_ht {background- 


h2> <spanclass=” plus_info” ><a|image:url(../../img/bg_b-newsl]_ 


赤 与 不 变 交 织 着 这 座 已 经 则 起 的 国际 
href=”#”target=”_blank”> 更 多 新 闻 |ht.gif);background-position:right 加 Us 
</a></span></div> top:background-repeat:repeat-x: } 
<divclass="content"> 定义 字体 灰 显效 
<h2> 图 片 .</h2> > 要 

. .content{background:white 
<div class=” noheto-news” ><ul>*…</ a 知 玩 指南 

url(../img/block bg.gif)repeat-x > 也 二 三 日 精华 本 带 版 + 
ul> 
bottom;border:1 lid 和 . 

i ottom;border:lpx soli 区 证 

#dcdcdb:} 
</div> 


以 百分比 作为 宽度 ， 适 合用 于 
DIV 包含 DIV 的 情况 

ss_block 

{float: right; 

} 


<divelass="ss_block"> 
.</div> 


16.3 ”酒店 推荐 页 面 


酒店 推荐 页 面 主要 包括 了 酒店 推荐 列表 、 推 荐 酒店 列表 和 广告 区 域 等 部 分 ， 本 节 重 点 介 
绍 一 下 该 页 面前 两 个 部 分 的 实现 方法 。 


酒店 推荐 列表 部 分 的 DIV 


酒店 推荐 列表 部 分 的 效果 ， 如 图 16-10 所 示 。 
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EF 再 证 
上 海 斯 格 威 铀 尔 曼 大 酒店 
铂 江 之 星 

s 上 海 亲 思 宾馆 

a 申花 连 镇 酒店 

a 夏 泰 166 

上 海 海港 宾馆 

? 北京 酒店 

?广州 酒店 

?三重 酒 店 


图 16-10 酒店 推荐 列表 效果 图 


上 图 列表 区 域 包含 在 名 为 menuitem 的 容器 内 部 ， 使 用 h3 显 示 标题 ， 代 码 如 下 所 示 。 


1. <divid="direct"> 

2 <!-- je decouvre IBIS --> 

3 <div><img src="img/ttr page decouvre.gif"alt="Je dgeacute;couvre 
Ibis" /></div> 

4. <div class="mention"> " 帮 您 选择 最 好 的 最 近 的 酒店 . ." </div> 


六 <ul id="nosservices" class="nosservices bottom"> 

6. <1i id="services"> 上 海 酒店 

hs <ul> 

8. <1i id="chambre"><a href="#"> 上 海 斯 格 威 铀 尔 曼 大 酒店 </a></1i> 

9. <!--// 列 表 代码 略 ----> 

10s </ul> 

rh </1i> 

12: <1i id="nouveaux"><a href="#"> 北 京 酒店 </a></1i> 

13. es 

14. </ul> 

15. <! 一 JavaScript 略 --> 

16. <div id="mini reserv"> 

ee <formname="formulaire" method="post"> 

二 <img src="img/commun/ttr mini reserv.gif" style="margin-bottom: 2px;" 
/F<br /> 

19. <labe1> 酒 店 搜索 查询 </1abel> 

20. <br /> <br /> 

2 <ahref="#"><img src="img/commun/bt ok mini reserv.gif"alt="OK" 

style="margin-left: 5px" /></a> 
2 </form> 


23. </div> 
24. </dly> 


这 里 的 样式 代码 比较 多 ， 我 们 挑选 部 分 显示 给 大 家 ， 样 式 代码 如 下 所 示 。 
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1 #direct { 

float: left; 

Se font-size: 11px; 

4. width: 186px; 

Ss margin-left: 5px; 

6. margin-top: 40px; 

天 display: inline; /** 同 行内 块 状 显示 **/ 
8. padding-bottom: 15px; 
9 

10. .mention { 

Ls text-align: right; 

A font-style: italic; 

3 Color: #990033; 

a margin: 4px Opx 7px Opx; 
ua 

16. body.services { 

1 嫩 避 font-family: Verdana, Arial, Helvetica, sans-serif; 
18. color: #433d3d; 

19. margin: 0; 

ZE background-color:#ece7cc7 
Ze 

DFT 

235 margin: Opx; 

py padding: Opx; 

2 

26. ai 

ZE color: #433d3d; 

28. text-decoration: none; 
Ze 

30.a:hover{ 

三 text-decoration: underline; 
2% 


} 
33. /*x*x// 这 里 的 样式 省 略 *****/ 


如 上 面 代码 所 示 ， 样 式 结构 清晰 明了 ，ul 和 1 没有 过 多 样式 ， 注 意 direct 容 器 的 定位 即 
可 。 


上 :天 融和 推荐 酒店 列表 部 分 的 DIV 
推荐 酒店 列表 部 分 由 标题 栏 和 酒店 列表 项 组 成 ， 如 图 16-11 所 示 。 
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上 海 兴 宁 大 酒 让 一 ( 原 东 羔 大 酒店 ) 简介 
上 海 兴 宇 大 酒 后 一 一 ( 原 东 苇 大 酒店 ) 是 一 宝 具 有 瑚 代 语 的 精品 商 各 洒 
让 ,位 


开 全 ;而 务 中心 配 有 先进 器 村 ， 更 专业 人 员 为 信 各 提供 


?> 通 牛 开业 时 间 2009 年 6 月 ， 楼 高 14 肢 ， 客 记 关 数 192( 同 》 套 。 
麟 江 之 星 ( 上 诲 陆家嘴 店 》 
蚀 辽 之 星 ( 上 海陆 家 跨 店 ) 简介 


齐 辽 之 星 ( 上 海陆 宗 员 店 ) 坐落 在 上 海 市 浦东 新 区 请 电路 ,号 所 上 海 尘 家 四 
鸣 主 项 商务 中 心 ， 立 于 清和 路 清场 路 交叉 口 ， 仁 导 流 江 花 甘 对面 ， 地 位 

杆 居 越 ， 立 适 便 把 ， 中 东方 明珠、 爹 蕊 大 大 、 延 安 叶 送 首 的 10 分 名 征程 ， 
下 轨道 4 导 、6 号 量 博 电路 站 步 行 约 15 分 钟 - 


少 销 后 开业 时 间 2008 年 ， 礁 丙 5 层 ， 客 扎 多 247 网 ( 知 ] - 


则 


图 16-11 ”推荐 酒店 详细 列表 效果 


这 部 分 的 HIML 代 码 如 下 所 示 。 


i 


oau 


10. 
a 
2 二 
3< 


在 上 面 代码 中 ， 每 一 个 具体 的 酒店 内 容 都 没有 包含 在 DIV 内 ， 而 是 直接 使 用 hr 和 p 标 签 自 
上 而 下 设计 ， 这 样 写 可 以 简化 设计 样式 的 代码 ， 但 是 这 并 不 是 一 个 非常 好 的 设计 ， 我 们 可 以 


<div id="centre twocol" class="espace firefox"> 


<hl class="centre twocol"><img src="img/ttr programmes fidelite.gif" 
/></h1> 

<h2 class="centre_twocol"> 上 海中 福 世 福 汇 大 酒店 </h2> 

<p><img src="img/carte afgibis.gif"alt="" width="115" height="84" 
class="img_drt_mrg" /><strong> 上 海中 福 世 福 汇 大 酒店 简介 </strong></p> 
<p> 上 海中 福 世 福 汇 大 酒店 是 上 海中 福 集 团 所 属 的 … .。</p> 

<p> <a href="#" class="fleche_forte"> 酒 店 开业 时 间 2004 年 ，….。</a></p> 
<p><a href="#" class="fleche forte"> 豪 华西 班 牙 式 家 具 ，…</a></p> 

<h2 class="centre twocol"> 上 海 兴 宇 大 酒店 </h2> 

<p><img src="img/carte aclubclassic.gif"alt="" width="115" 
height="84" class="img drt mrg" /><strong><a href="#" > 上 海 兴 宇 大 酒店 
一 一 ( 原 东 莱 大 酒店 ) 简介 </a></strong></p> 

<p> 上 海 兴 宇 大 酒店 一 一 ( 原 东 莱 大 酒店 ) 是 一 家 具有 现代 感 的 … .</p> 

<p> <a href="#" class="fleche_forte"> 酒 店 开业 时 间 2009 年 6 月 ,，….</a></p> 

<!--- 其 他 酒店 项 内 容 略 ---> 


</div>> 


通过 对 DIV 样 式 定义 内 部 的 hr 小 标题 和 酒店 介绍 内 容 这 些 子 标签 ， 而 不 用 定义 段落 标签 的 样 
式 ， 请 读者 注意 一 下 这 个 设计 问题 。 样 式 代码 如 下 所 示 。 


1 
2. 
3 
4 
5 


#two_col #centre twocol { 


width: 512px; 


hl.centre twocol { 


padding: 14px 0px 10px 0px; /*** 上 内 边 距 14 像 素 ， 下 内 边 距 10 像 素 ***/ 
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6. margin: 0px; 

Ts width:348px; 

8 

9. h2.centre twocol { 

TO font-size: 12px; 

5 margin: 0PX7 

2 Color: #92021f; 

3 padding: 0px 0px 6px 0px;  ”/*** 下 内 边 距 6 像 素 ， 其 他 无 内 边 距 ***/ 
14.} 

15. .espace firefox{ 

16. border:solid lpx #FFFFFF; 

Eb 

18.#two col#centre twocolp{ 

a font-size: 1lpx; 

20. margin: 0em 0em lem; 

了 padding: Opx; 

2 

23.#two_col#centre twocol div.breakfast img { 
0 height:86px; 

Cb float:left; 

oe 

在 上 面 代码 中 ， 页 面 全 部 使 用 h2 和 p 标 签 自 上 而 下 设计 ， 代 码 第 25 行 为 img 标 签 设置 


了 左 浮动 ， 同人 全 全 吕 人 六 的 2 于 有 和， 
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设计 公司 网 站 属于 公司 网 站 的 类 型 ， 一 般 主要 展示 内 容 包含 产品 显示 和 
>。 业务 服务 这 两 个 部 分 ， 其 他 关于 我 们 、 联 系 方式 等 内 容 基本 上 大 同 小 异 。 设 
计 该 类 网 站 的 时 候 ， 不 仅 需 要 了 解 客户 开发 网 站 的 需求 ， 还 要 了 解 公司 的 企 
业 文化 、 公 司 的 行业 特点 ， 按 照 这 种 设计 思路 才能 很 好 地 贴 合 设计 主题 和 思 
想 ， 符 合 客户 需要 的 风格 。 

目前 许多 公司 网 站 的 形式 大 致 相同 ， 很 多 网 站 的 页 面 布 局 基本 一 样 ， 
只 是 替换 不 同 的 图 片 达到 风格 差别 的 效果 。 其 实 ， 公 司 网 站 也 可 以 多 样 化 设 
计 ， 本 章 介绍 的 设计 公司 网 站 案例 是 一 个 颜色 绚丽 、 设 计 合理 、 注 重 细节 的 
优秀 设计 案例 。 下 面 ， 我 们 就 来 分 析 一 下 这 个 网 站 案例 的 实现 方式 。 


人 网 站 页 面 效果 分 析 


本 节 将 着 重 分 析 设计 公司 网 站 的 首页 和 “设计 理念 ”页 面 的 设计 样式 ， 而 “关于 我 们 ” 
面 的 风格 与 “设计 理念 ”页 面相 似 ， 所 以 就 不 做 详细 分 析 了 。 


页 


人 ELSE 首页 效果 分 析 
设计 公司 网 站 首页 的 布局 是 比较 常见 的 三 行 样式 ， 其 中 ， 第 一 行 放置 网 站 Logo、 网 站 导 
航 等 部 分 内 容 。 第 二 行 放置 “网 站 广告 ”、“ 关 于 我 们 ”、“ 服 务 导航 ”、“ 名 词 解释 ”、 


“预约 登记 ”等 几 个 部 分 。 第 三 行 放置 部 分 导航 、 版 权 相 关 和 联系 方式 等 部 分 。 

设计 公司 网 站 大 量 地 应 用 了 图 片 ， 在 首页 中 ， 就 有 三 个 地 方 大 幅 应 用 了 图 片 ， 第 一 个 是 
页 面 的 背景 图 ， 第 二 个 是 广告 部 分 ， 第 三 个 是 公司 介绍 部 分 。 

首页 的 效果 如 图 17-1 所 示 。 


人 EDIV+CSS mmrxrn 局 RS 


二 去 头 部 分 上 上 了 1 国生 


形象 设计 有 限 公司 是 一 家 以 塑 千 企业 形象 品牌 形 。 告诉 我 们 您 的 大 至 要求， 我 们 全 
象 为 核心， 涉及 标志 设计 0go 设 计 ) Vi 设计 ， 包 闭 讼 计 、 宣 迪 盏 几 设 。。 杀 专 人 联系 从 
计 、POP 霉 报 设计 、 快 销 品 设计 、 风 而 设 计 ， 品 牌 形象 琶 及 各 种 纸 册 


品 E 虽 | 为 一 休 的 具有 专业 设计 水 淮 的 形象 设计 机 构 。 闪 名 
我 们 的 设计 服务 部 箱 
“标志 设计 “店面 形象 设计 。。“ 邱 届 流 计 a 
“包装 设计 名片 设计 联系 电话 
“网 站 设计 , 传 间 设计 
“品牌 形象 设计 “ 画 措 设计 “POP 设计 四 
“产品 形象 设计 “海报 设计 “DM 设 计 
f 及 避暑 加 
视觉 设计 创意 忆 维 三 
禄 认 上 旦 活动 | 他 的 几 力 下 图 形 、 线 。。 【全 


总 称 ， 其 主要 功能 是 调动 所 有 
的 平面 因素 ， 达 到 视 沉 传达 的 
目的 。 


务 符号、 人 、 文 以 及 秒 到 现下 有 硬 抽 国 


的 来 现 手法 ,办 多 元 素 的 计 择 和。 
绽 合 来 和 名 者 员 了 ， 联 想 是 。。 二 间 叶 和 过 9 需 
又 发现 量 要 的 思维 方法 之 一 ， 


使 创意 的 关键 ， 是 形成 创意 思 准 
的 基础 ， 


加 zolo 设计 公司 保留 一 切 权 利 


公司 地 址 / 上 海 市 并 口 区 选 仙 路 123 号 
电话 ，o2x-12345673 / 传真 ，ozl-12345678 
首页 ， 关于 我 们 。 设计 理念 。 作品 展示 。 合作 渠道 。 联系 我 们 


员 
a 


17-1 首页 的 效果 
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“设计 理念 ”页 面 的 效果 分 析 


设计 理念 页 面 可 以 分 为 设计 理念 部 分 和 预约 登记 部 分 ， 如 


展示 公司 的 设计 理念 。 


17-2 所 示 ， 通 过 这 个 页 面 ， 


HI 


这 个 页 


采用 了 三 行 样式 ， 其 中 ， 


页 脚 ， 而 第 


1 


是 第 二 行 的 效果 。 


标志 的 本 质 在 于 它 的 功用 性 
经 id 艺术 设计 的 标志 虽然 具有 观赏 价值， 但 


告诉 我 们 您 的 大 臻 要求， 我 们 会 


派 专人 联系 您 


“标志 设计 识别 性 “标志 设计 艺术 性 
“标志 设计 显著 性 “标志 设计 准确 性 
"标志 设计 多 样 性 “标志 设计 持久 性 


设计 公司 玖 力 于 企业 Vi 设计 的 导入 和 VI 手册 的 设计 与 实施 ， 帮 助 企业 树 
立 良好 的 企业 形象 ， 建 立 统一 的 视觉 管理 体系 ， 完 殴 企 业 ?FAPj 外 的 传 
播 系统 ， 加 速 企业 的 良性 运转 。 


何 时 可 六 至 访 


需要 印 串 的 份 数 


食品 包装 设计 请 简略 填 入 多 的 需求 


好 的 包装 设计 是 企业 创造 利 洞 的 重要 手段 、 第 咯 定 位 准确 、 符 合 消费 者 
心理 的 产品 包 净 设 计 ， 能 帮助 企业 在 众多 竞争 品牌 中 脱颖而出 。 


网 站 设计 

我 们 凭借 起 强 的 设计 开发 实力 和 策划 创意 ， 为 我 们 服务 的 客户 提供 一 流 
的 网 站 建设 和 网 页 设计 服务 。 一 个 好 的 网 站 ， 不 仅 能 够 给 人 展 好 的 视 党 
享受 ， 更 是 一 种 理念 ， 信 息 和 功能 的 传达 , 


海报 /画册 设计 

海报 设计 不 同 于 一 般 和 普通 的 大 众 化 的 低层 次 设计 、 设 计 思想 要 有 极 强 
的 时 代 使命 感 、 企 业 的 营销 力 、 企 业 想 近 占 先 机 占 令 市场、 必须 有 一 定 
的 媒介 把 企业 的 产品 转 媒 疆 需求 者 . 


图 17-2 ”设计 理念 页 面 的 效果 图 


人 LE 网 站 文件 综述 


网 站 页 面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 js 
片 、CSS 文 件 和 JS 代 码 ， 文 件 及 其 功能 如 表 17-1 所 示 。 


个 


第 一 行 和 第 三 行 的 样式 与 首页 完全 相同 ， 都 是 页 头 和 
设计 理念 部 分 和 预约 登记 部 分 组 成 ， 图 17-2 


录 分 别 保存 网 站 所 上 


到 的 图 


333 


人 | 村 闫 DIV+CSS mmrxtsma Le 


表 17-1 设计 网 站 文件 和 目录 一 览 


模块 名 文件 名 功能 描述 
index.html 首页 
页 面 文件 [wed html 设计 理念 页 面 
| wen.html 关于 我 们 页 面 
css 目 录 之 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
js 目录 之 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img | 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
Pa 
» > 
1Z.2 ”规划 首页 的 布局 
这 里 搭建 的 是 一 个 设计 公司 网 站 ， 网 站 首页 的 布局 比较 重要 ， 本 节 将 依次 讲述 首页 重要 


部 分 的 现实 方式 。 


搭建 首页 页 头 部 分 的 DIV 


首页 页 头 是 网 站 比较 重要 的 部 分 ， 它 包含 了 网 站 的 Logo 和 网 站 导航 部 分 ， 页 头 的 效果 如 
图 17-3 所 示 。 


罗 二 没 计 公 司 。 首页 ”关于 我 们 。 设计 理念 。 “作品 展示 ”联系 我 和 


页 头 部 分 的 关键 代码 如 下 所 示 。 


1. <divid="headerl"> 

<a href="index.html"> 

3 <img src="img/daras-garden.gif" width="165" height="44" id="logo" 
/></a> 

4. <ul id="nav1"> 

5 <1i id="n-about"><a href="index.html"> 首 页 </a></1i> 

6. <1i id="n-weddings"><a href="wen.html"> 关 于 我 们 </a></1i> 

We <li id="n-events"><a href="wed.html"> 设 计 理 念 </a></1i> 

8. <1i id="n-photos"><a href="wen.html"> 作 品 展示 </a></1i> 

BE <1i id="n-contact"><a href="wed.html"> 联 系 我 们 </a></1i> 

LO </al> 

Lie </div> 
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这 部 分 代码 比较 简单 ， 导 航 鼠 标 停留 效果 主要 由 以 下 CSS 代 码 形成 的 。 


1. #n-weddingsaf{ 


Ze 


eh 


background-position: -68px 0; 


4. /* 鼠标 停留 效果 */ 


5. #n-weddings a:hover { 


人 


background-position: -68px 44px; 


搭建 “网 站 广告 ”部 分 的 DIV 


网 站 / 


告 部 分 是 第 二 行 的 第 一 个 部 分 ， 这 部 分 的 主要 效果 就 是 图 片 切换 ， 如 图 17-4 所 示 。 


图 17-4 ”网 站 广告 部 分 的 DIV 效果 图 


网 站 广告 部 分 的 关键 代码 如 下 所 示 。 


1. <dqiv idq="feature"> 


2 <table width="720" height="320" border="0" align="center" 
cellpadding="0" cellspacing="0"> 

全 = <tr> 

<td width="720" height="320" align="center"> 

< 洒 <div class=pic show style="width:720px;"> 

6. <div id="imgADPlayer"></div> 

5 <script type="text/jscript" language="JavaScript"> 

8. PImgPlayer.addItem( "", "", "img/720320.jpg"); 

9 PImgPlayer.addItem( "", "", "img/720320-1.jpg"); 

FO: PImgPlayer.addItem( "", "", "img/720320-2.jpg"); 

二 PImgPlayer.addIitem( "", "", "img/720320-3.jpg"); 

和 PImgPlayer.addItem( "", "", "img/720320-4.jpg"); 

ji PImgPlayer.init ("imgADPlayer", 720, 320 ) 

jj </acripE> 

Ds </div> 

6 </td> 

7 REE> 

82 </table> 

:RR /shh 
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从 上 面 代码 可 以 看 出 ， 这 部 分 的 搭建 由 DIV+TABLE 组 合 而 成 ， 在 TABLE 中 ， 图 片 的 组 
成 方式 又 是 由 JS 脚 本 生成 的 ， 这 里 就 不 做 说 明了 。 


人 搭建 “公司 介绍 ”部 分 的 DIV 


公司 介绍 部 分 是 第 二 行 的 第 二 个 部 分 ， 这 部 分 放置 了 “关于 公司 ”等 三 个 图 片 ， 效 果 如 
图 17-5 所 示 。 


公司 介绍 部 分 的 代码 如 下 所 示 。 


1. <div idq="featurettes"> 


a <ahref="#"> 

要 <img src="img/main/bloom-g.jpg" width="235" height="188" 
onmouseover="this.src=” img/main/bloom.jpg” " onmouseout="this. 
src=’ img/main/bloom-g.jpg’” " /> 

4. </a> 

Ss <ahref="#"> 

Gs <img src="img/main/bloom]11 .jpg" width="235" height="188" 
onmouseover="this.src=’ img/main/blooml.jpg” " onmouseout="this. 
src=’ img/main/bloomll1.jpg’ "/> 

有 </a> 

8. <a href="#"> 

Be <img src="img/main/photos-g.jpg" width="235" height="188" 
onmouseover="this.src=’ img/main/photos.jpg’ " onmouseout="this. 
src=’ img/main/photos-g.jpg’” "/> 

TI0- </a> 

Ele </div> 


让 


从 上 述 代 码 可 以 看 出 ， 这 部 分 的 搭建 代码 比较 简 齐 
的 ， 但 是 这 种 简单 搭建 却 有 一 个 小 的 动态 效果 ， 就 是 
行 的 onmouseout 属 性 。 

这 种 组 合 方式 很 常见 ， 主 要 就 是 对 图 片 的 选择 。 


搭建 “设计 服务 ”部 分 的 DIV 


设计 服务 部 分 是 第 二 行文 字 部 分 的 左边 部 分 ， 这 部 分 主要 分 三 个 部 分 ， 其 效果 如 图 17-6 
所 示 。 


， 主 要 由 三 个 超 链 加 上 图 片 组 合 而 成 
片 切换 ， 实 现 方法 是 使 用 了 第 2 到 第 4 


区 | 


Dk 


Dk 
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关于 设计 公司 
形象 设计 有 限 公司 、 是 一 家 以 塑造 企业 形象 品 B 形 
多 为 核心 、 涉 及 标志 设计 (Iogo 设 计 ). Vi 设计 、 包 装 设计 、 宣 传 画册 设 
计 、POP 海 报 设计 、 快 品牌 形象 琶 问 及 各 种 纸 制 
品 6p 串 为 一 体 的 具有 专业 TNF 下 乓 区 系 区 寺 机 构 . 


我 们 的 设计 服务 
-标志 设计 -店面 铺设 计 。。“ 印 剧 流 计 


“ViR& 计 "包装 设计 “名 片 设 计 
“企业 形象 设计 “网 站 设计 “传单 设计 


“品牌 形 登 讼 计 | 设计 服务 部 分 “POP 设 计 
"产品 形象 设计 海报 充 t "DM 设 计 


视觉 设计 创意 思维 
视 党 设计 是 平面 守则 设计 活动 的 。 创意 表现 的 寻 力 米 自 图 形 、 绪 
总 称 ， 捧 主要 功能 是 调动 所 有 
的 平面 因素 ， 达 到 视角 传达 的 
目的 。 组 合 未 自 创 起 者 的 
又 类 灵感 重要 的 思维 方法 : 


文字 介绍 部 分 上 创意 的 关键 ， 是 形成 齐 意 思维 
的 基础 ， 


图 17-6 ”设计 服务 部 分 的 效果 
设计 服务 部 分 的 关键 代码 如 下 所 示 。 


1. <divid="content"> 

2. <img src="img/main/story.gif" width="367" height="55" class="block" /> 
3. ”<p><span> 形 象 设计 有 限 公司 、 是 一 家 以 塑造 企业 形象 </span> 品牌 形象 …*…</p> 
4. ”<h3> 我 们 的 设计 服务 </h3> 

Se <ul> 

6. <1i> 标 志 设计 </1i> 

了 

名- </ul> 

Se <ul> 

10. ”<1i> 店 面 形象 设计 </1i> 

i a 

12. </ul> 

3 -<UL 

14. ”<1i> 印 刷 设计 </1i> 

Ee Se 

L6Gs </a> 

17. <divclass="clear left"> 

18. ”<h3> 视 觉 设 计 </h3> 

二 95 <p> 

20. 视觉 设计 是 平面 空间 设计 活动 的 总 称 ， 其 主要 功能 是 调动 所 有 的 平面 因素 ， 达 到 视觉 传达 的 目的 。 
这 </p> 

22. </div> 

23. <I= -18fE==2 

24. <xdivclass="right"> 

25 <h3> 创 意思 维 </h3> 

26. ”<p> 创 意 表 现 的 魅力 来 自 图 形 、 线 条 、…… </p> 
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27: </div> 

28. <!-=right-==> 

29. </div> 

在 上 面 代码 中 ， 第 2 行 和 第 3 行 是 关于 我 们 部 分 ， 第 4 行 到 第 16 行 是 设计 服务 部 分 ， 第 17 
到 第 25 行 是 文字 介绍 部 分 。 


人 ED 搭建 “预约 登记 ”部 分 的 DIV 


预约 登记 部 分 是 第 二 行 正文 部 分 的 最 后 一 部 分 ， 这 部 分 主要 放置 的 是 预约 登记 表 ， 效 果 
如 图 17-7 所 示 。 


联系 电话 


标志 设计 立 


[月 从 eallz[] 
何 时 可 以 盏 访 


需要 ER 的 份 数 
请 阐 咯 填 入 您 的 需求 


图 17-7 ”预约 登记 部 分 的 DIV 


预约 登记 部 分 的 关键 代码 如 下 所 示 。 


1. <div id="visit"> 

<img src="img/shared/plan-a-visit.gif" width="155" height="55" 
class="block" /> 

3 <p> 告 诉 我 们 您 的 大 致 要 求 ， 我 们 会 派 专人 联系 您 </p> 

4 xa name="visitform" id="visitform"></a> 

3 <input name="visit" type="hidden" value="1" /> 

6. <label for="name"> 姓 名 </label> 
这 

8 

3 


ID 


<input name="name" type="text" id="name" class="input" value="" /> 
He/ 
<label for="email"> 邮 箱 </label> 
TO <input name="email" type="text" id="email" class="input" value="" /> 
1 <br /> 
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12. <xlabel for="phone"> 联 系 电话 </label> 


1 训 汪 <input name="phone" type="text" id="phone" class="input" value="" /> 
4 <br /> 

ye <select name="type" class="select"> 

1 <option value="0"> 标 志 设 计 </option> 

Ei . 

18。 </select> 

Es <br /> 

1 所 <select name="month" class="select small"> 
2 <option value="0"> 月 份 </option> 

之 2 DT 

2Z3- </select> 

24. <select name="day" class="select small"> 
2 <option value="0"> 日 期 </option> 

26< <option value="01">01</option> 

2 CE 

28. </select> 

py <br /> 

30. <select name="time" class="select"> 

< 加 <option value="0"> 何 时 可 以 拜访 </option> 
2 Ee 


SS </select> 
34. <br /> 


< <select name="guests" class="select"> 
36. <option value="0"> 需 要 印刷 的 份 数 </option> 
< ee 


38% </select> 
39. <br /> 
40. ”<label> 请 简略 填 入 您 的 需求 </1abe1> 


LL <textarea name="details" cols="10" rows="5" class="textarea"></ 
textarea> 

2 br 

43. <input name="submit" type="image" class="submit" value="submit™" 
src="img/submit.gif"alt="submit" /> 

44. </div> 


这 部 分 的 代码 比较 简单 ， 只 要 注意 一 下 每 个 文本 框 的 背景 色 都 不 是 默认 的 ， 实 现 这 部 分 
效果 的 CSS 代 码 如 下 所 示 。 


二 .input, .textarea, .select { 

2 background: #ebe5d4; /* 设置 背景 色 */ 
3 Color: #555; 

font-family: inherit; 

ia font-size: 1.2em; 

6 border-top: 2px solid #d7d2c3; 

7 border-left: 2px solid #d7d2c3; 

8. } 

上 


面 样式 代码 定义 了 所 有 input、textarea、select 标 签 的 背景 色 等 属性 。 


团 
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搭建 页 脚 部 分 的 DIV 


页 脚 部 分 的 项 部 使 用 分 隔 线 ， 左 边 包 含 Logo 和 版 权 信 息 ， 右 边 包 含 公司 信 息 和 站 点 导 
航 ， 效 果 如 图 17-8 所 示 。 


公司 地 十 /上海 市 虹口 区 遂 仙 路 123 号 
饭 设计 公司 电话 : 021-12345678 /传真 ，021-12345678 


首页 。 关于 我 们 。 设计 理念 。 作品 展示 。 合作 当道 。 到 


名 2010 设计 公司 保留 一 切 权利 


图 17-8 页 脚 部 分 的 DIV 


页 脚 部 分 关键 的 实现 代码 如 下 所 示 ， 这 部 分 代码 比较 简单 ， 所 以 就 不 再 分 析 了 。 


1. <xdivid="footerl"> <a href="#"><img src="img/daras.gif" width="167" 
height="61" class="1ogo" /></a> 

2. <p> 公 司 地址 / 上 海 市 虹口 区 逸 仙 路 123 号 <br /> 

3 电话 : 021-12345678 / 传真 : 021-12345678<br /> 

4. <ahref="index.html" class="main"> 首 页 </a> 

| &middot; 

6. <a href="#"> 关 于 我 们 </a> 

D> &middot; 

8. <a href="#"> 设 计 理 念 </a> 

9 gmiddot; <a href="#"> 作 品 展示 </a> 

10. ”&middot; <a href="#"> 合 作 渠 道 </a> 

11. ”&middot; <a href="#"> 联 系 我 们 </a> 

T2570 DE 

13. ”&copy;2010 设计 公司 保留 一 切 权利 

14. </p> 

15. </div> 


首页 CSS 效 果 分 析 


在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 本 小 节 将 用 表格 的 形式 描述 
首页 中 其 他 CSS 的 效果 ， 如 表 17-2 所 示 。 


表 17-2 首页 DIV 和 CSS 对 应 关系 一 览 


DIV 代码 


CSS 描 述 和 关键 代码 


人 ></a>… 


<div id="featurettes">| 设计 该 区 域 的 宽度 和 高 度 

<a href="#"><img |#featurettes{height: 253px:margin- 
src="img/main/bloom-g. | left: 16px:} 

jpg"onmouseover=” . |#featurettes img{ 


” onmouseout=” .…” |float: left; 


margin: 33px 11px00:} 
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( 续 表 ) 
DIV 代码 CSS 描 述 和 关键 代码 效果 图 
<img src="img/main/| 定义 图 片 块 状 显示 
story.gif" width="367" | .block { 关于 设计 
height="55" class="block" display: block: Se 
户 
定义 ul 的 文字 样式 和 列表 样式 等 
#content ul { 
<ul> “标志 设 ; 
color: #663; 标志 设计 
<1i> 标 志 设计 </i> “Vi 设计 
a font-size: 1.2em:; 
<l>VI 设 计 </li> : g “企业 形象 设计 
a line-height: 1.8; > 
<1i> 企 业 形象 设计 <Ai> “品牌 形象 设计 
list-style: none outside: 和 
<hul> “产品 形象 设计 
margin: 0.6em 0 1.2em 0; 


设计 理念 页 面 页 面 由 列表 、 业 务 分 类 介绍 和 预约 登记 三 个 部 分 组 成 ， 这 个 页 面 内 容 相对 
简单 ， 整 体 风 格 较为 个 性 、 绚 丽 。 


《LE 设 


计 理 念 介绍 的 DIV 


设计 理念 介绍 部 分 包含 理念 标题 和 内 容 ， 下 方 包含 一 个 相关 介绍 的 列表 ， 如 图 17-9 所 


示 ， 这 个 页 


整体 设计 简洁 ， 简 单 地 使 用 文字 颜色 来 区 分 不 同 的 功能 。 


“标志 设计 艺 不 性 


“标志 设计 显著 性 “标志 设计 准确 性 
“标志 设计 多 样 性 “标志 设计 持久 性 


TVT 论 计 
图 17-9 ”设计 理念 效果 


四 


QDV+CSS ens 


这 部 分 的 代码 如 下 所 示 。 


<div class="pad"> 
<p> 
<span> 标 志 的 本 质 在 于 它 的 功用 性 
</span><br /> 
经 过 艺术 设计 的 标志 虽然 具有 观赏 价值 ， 但 标志 主要 不 是 为 了 供 人 观赏 …… 
</p> 
<ul class="left"> 
<1i> 标 志 设计 识别 性 </1i> 
9 <1i> 标 志 设计 显著 性 </1i> 
10. ”<1i> 标 志 设 计 多 样 性 </1i> 
ed </ul> 
2 <ul class="right"> 
13. ”<1i> 标 志 设 计 艺术 性 </1i> 
14. ”<1i> 标 志 设 计 准 确 性 </1i> 
15. ”<1i> 标 志 设 计 持 久 性 </1i> 
Gs </ul> 
IT </adiy> 


上 面 代码 中 使 用 ul 的 类 样式 定义 了 display: inline， 设 定 了 2 个 ul 列表 并 排 显 示 ， 然 后 分 别 
使 用 leftfnright 设 置 了 左 悬 浮 和 右 悬 浮 。 


wawm 必 wm 


#content ul { 

display: inline; 
float: left; 
width: 140px; 


和 

受 

3 

4. 
Sa 
6. #content .left { 

7 background: url(../img/divl .gif) no-repeat 206px 35px; 
width: 207px; 

ye 
10.#content .right { 

Ls width: 209px; 
| 

13 spadt 

14. padding-left: 21px; 
SS 

16. .left { 

Es display: inline; 
BR- float: left; 

Ee 

20= -right 

:本 display: inline; 
2 float: right; 
这 


面 的 样式 定义 比较 简单 ， 主 要 对 p、span、 忆 标签 的 文字 颜色 和 大 小 进行 定义 。 


Fr 
团 
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业务 分 类 部 分 的 DIV 


正文 的 第 二 部 分 是 设计 理念 的 业务 分 类 部 分 ， 本 部 分 采用 自 上 而 下 的 设计 方式 ， 主 要 标 
签 包含 h3 标 题 、p 段 落 和 作为 分 隔 的 DIV， 如 图 17-10 所 示 。 


立 良好 的 企业 形象 ， 建 立 统一 的 视觉 管理 体系 ， 完 善 企业 ?| 内 对 外 的 传 
播 系统 ， 加 速 企业 的 恨 性 运转 。 


食品 包装 设计 
好 的 包 革 设计 是 企业 创造 利 洞 的 重要 手段 、 第 咯 定位 谁 确 、 符 合 消费 者 
心理 的 产品 包装 设计 ， 能 帮助 企业 在 众多 竞争 品牌 中 脱颖而出 


网 站 设计 

我 们 凭借 超 强 的 设计 开发 实力 和 荣 划 创 意 ， 为 我 们 服务 的 客户 提供 一 流 
的 网 站 建设 和 网 页 设计 服务 。 一 个 好 的 网 站 ， 不 仅 能 够 给 人 民 好 的 视 沉 
享受 ， 更 是 一 种 理念 ， 信 息 和 功能 的 传 过。 


图 17-10 ”设计 理念 页 面 业 务 分 类 效果 图 


实现 业务 分 类 部 分 的 DIV 代码 如 下 所 示 。 


1. <img src="img/secondary/43355.jpg" width="433" height="55" class="block 
clear" style="margin-bottom:10px;" /> 
<div class="pad"> 
<h3><a href="#">VI 设 计 </a></h3> 
<p><a href="index.html"> 设 计 公司 </a> 
致力 于 企业 VI 设计 的 导入 和 VI 手册 的 设计 与 实施 ， 帮 助 企 业 树立 良好 的 企业 形象 ， 建 立 统一 
的 视觉 管理 体系 ， 完 善 企 业 对 内 对 外 的 传播 系统 ， 加 速 企业 的 良性 运转 。 
</p> 
<div class="hr"> 
<hr /> 
</div> 
0. <!---// 其 他 分 类 代码 略 -----> 
了 


</div> 


w 心 w 


FFeoo ae 


上 面 的 代码 由 两 个 DIV 组 成 一 个 大 的 版 块 ， 所 使 用 的 CSS 代 码 如 下 所 示 。 


团 


1. #content p, #visitpt{ 
font-size: 1.2em; 

2 line-height: 1.8; 

4 margin: 0.6em01.2em0; 
本 
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人 IEiEDIV+CSS mmrxnn 加 庆 计 于 于 于 语言 二 时 时 时 时 昨 昨 时 


6. #content h3, #content p span { 
i color: #366; 

Bs font: 2em Georgia, serif; 
9 
10.#content h3a{ 

3 Color: #366; 
2 
13.#content p span { 

La font-size: 20px; 
5 
16.#contentpaf{ 

Ye color: #933; 

下 8 text-decoration: underline; 
Lo 
20.#content pa:hover, #content h3a:hover { 
Zi color: #000; 

Ze 

了 并 


24. border-top: 1px solid #366; height: 15px; margin-right: 20px; 


oa 

Zhe heh 

27. display: none; 
人 


在 上 
设计 。 这 个 案例 是 简单 的 公司 门户 ， 内 容 简 单 、 页 面 少 、 结 构 简 六 


代码 中 ， 使 用 、h3、hr 组 成 的 DIV 块 ， 实 际 项 目 中 要 根据 项 


源 ， 是 上 


的 需求 来 决定 页 
上 较 好 的 设计 方式 。 
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本 节 将 重点 分 析 新 闻 网 站 的 首页 和 “新 闻 内 容 ” 页 面 的 设计 样式 ， 而 “健康 专题 ”页 面 


新 闻 网 站 


网 络 新 闻 在 其 踏 进 网 络 领域 开始 ， 不 仅仅 代表 着 新 闻 从 纸 媒 介 步 入 虚 
"> 拟 性 的 平面 ， 而 且 标志 着 一 个 转变 ， 纸 张 消 失 了 ， 取 而 代 之 却 是 虚拟 性 的 平 
面 ， 一 个 有 着 无 限 可 能 的 平台 。 

本 章 将 要 介绍 一 个 新 闻 网 站 ， 它 包括 科技 、 数 码 、 业 界 、 博 客 、 人 物 等 
方面 的 新 闻 ， 还 包括 深度 新 闻 、 新 闻 报道 等 专题 。 下 面 我 们 就 来 分 析 一 下 这 
个 新 闻 网 站 的 现实 方式 。 


网 站 页 面 效 果 分 析 


风格 比较 简单 ， 所 以 就 不 做 详细 分 析 了 。 
EE 首页 效果 分 析 


新 闻 网 站 的 首页 布局 是 很 常见 的 三 行 样式 ， 其 中 ， 第 一 行 放置 网 站 Logo、“ 网 站 导 
航 ”、“ 站 内 搜索 ”等 内 容 。 第 二 行 放置 “深度 新 闻 ”、“ 大 图 新 闻 ”、“ 新 闻 报道 ”、 


“名 人 博客 " 


等 几 个 部 分 内 容 。 第 三 行 放置 部 分 导航 、 版 权 相 关 和 部 分 友情 链接 等 内 容 。 


在 第 二 行 中 ， 包 含 了 网 站 的 主题 部 分 ， 这 部 分 主要 分 为 两 列 ， 第 一 列 以 一 些 新 闻 标题 组 


成 的 几 个 新 闻 ， 第 二 列 则 是 由 大 图 新 闻 、 新 闻 报道 和 博客 这 三 个 部 分 组 成 。 


首页 的 效果 如 图 18-1 所 示 。 


QQ、 | 精通 DIV+CSS emit 布局 


色 括 logo、 导 航 和 
搜索 等 主要 模块 


第 二 行 主题 部 分 ， 包 
括 图 片 新 闻 等 部 分 


| 海 宇和 雅虎 日 本 6 月 上 

| 线 渐 网 购 平台 将 互相 推广 上 架 商品 
Facebookszynga 责 -> 
是 时 人 终结 A i Phe 
EIE 的 六 六 > nt 继 英国 最 大 保 | 


ThinkPad 变 色 记 

仿 油 软 黑 惧 的 10 大 产品 

新 型 云 计算 之 门 开启 

Sr 新 闻 报道 

DST 收 购 ICO 

DST 斥 次 1.87 亿 美元 收购 证 信 首 次 补贴 社 。 最 高 由 话 贰 3600 元 北京 电信 首次 补 巾 计 地方 网 丫 销 :提升 三 阁 ROI 五 这 径 


IcQ 3600 元 ( 北 后 外 从 亩 外 六 册 玉芝 蚜 沙 风 认 : 寿 局 。 2010-05-10 
峻 5 视 3600 届 


导读 投资 俄罗斯 公司 
a “国家 开发 网 络 误 访 (“ 国 六 开 怖 网 等 条 具 角 证 机 
3 亿美 元 投资 全 罗 
a 站 这 en 


网 络 前 沿 转 QQ Thinkpad edge 助 燃 年 轻 理 起 ( 季 副 ) 
Bituy 数 据 星 示 9.9% 交 通 全 Ti Fr 
ET 研究 平台 C IT 事 人 人 事 《17 和 


与 3 考题 科技 世博 专 是 
Spindex 功 能 详解 


[| 
PT TT 


赔 
网 


18-1 首页 效果 


本 “新 闻 内 容 ” 页 面 的 效果 分 析 


在 新 闻 内 容 页 面 中 ， 放 置 文章 导航 和 文章 详细 ， 这 个 页 面 主要 用 来 显示 文章 详细 内 容 。 
采 了 三 行 样式 ， 其 中 ， 第 一 行 和 第 三 行 的 样式 与 首页 完全 相同 ， 都 是 页 头 和 
页 脚 。 第 二 行 由 文章 导航 和 文章 详细 组 成 ， 这 里 只 给 出 第 二 行 的 效果 ， 如 图 18-2 所 示 。 


和 
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由 大 要 辣 部 全 
新 闻 内 容 


二 Andro | 新 华 都 总 裁 唐骏 重 返 网 游 业 初期 投资 上 亿 元 


美国 人 知晓 Twitter 比例 |‖| [导读 ] 唐 验 今 日 对 昔 斌 科技 表示 ， 自 己 将 重 返 网 游行 业 ， 并 对 周游 团队 全 面 投资 。 其 个 人 和 新 
] 年 内 从 26% 增 至 879%e | 华 都 旗下 公司 港澳 资讯 加 在 一 起 ， 早 期 的 投资 规模 将 达到 一 亿 元 。 


三世 条 用 再 指 二 豆 认 著 ”| 月 10 日 消息 ， 新 华 都 某 团 CEO 吉 音 坟 唐 验 信 日 向 诗 讯 科技 证 实 ， 自 己 
克 事 实 清 芝 基 益生 反 网 洲 开业 ， 对 网 适 团 队 的 机 入 模 初 斯 笠 达到 一 亿 元 。 据 了 解 
新 华 同 东 方 同等 10 新 闻 || 信 日 有 消息 称 ， 唐 双 近 基 秘 密 考 家 了 杭州 等 地 的 阿 落 市 场 ， 有 望 以 个 人 
网 站 万 首 批 A 受 上 市 对 多 | 隆重 新 投资 网游 。 有 知情 人 士 适 落 ， 在 过 去 一 个 月 中 ， 唐 验 几乎 忆 了 
苹果 注册 iTunes Live 商 || 碧 中 飞人 ， 在 北京 、 青鸟。 上海、 杭州 等 地 来 回 奔流， 十 至 还 跑 了 一 趋 
蒜 提供 实时 杷 乐 服 务 新 加 坡 。 除 了 忙于 公司 的 常规 业务 ， 如 何 重 返 网 游 市 场 是 他 比较 上 心 的 
美国 同 开通 上 海 站 王 共 | 课题。 对 此 ， 褒 验 今日 对 革 讯 科技 表示 ， 自 己 将 重 返 网 六 行业 ， 并 对 网 
执 1 年 扩张 至 20 座 城市 ”|| 洲 团队 全 面 投资 。 其 个 人 和 新 华 都 旗下 公司 港澳 资讯 加 存 一 起 ， 早 期 的 

Ss 忆 投资 规模 将 达到 一 亿 元 。 据悉 ， 计 驶 于 2006 年 4 月 加 入 新 华 都 ， 在 于 之 
家 拓 格 全 加 玫 各。 | 入 他 是 过 大 总 塘 ， 在 站 六 图 拥 较 二 的 江湖 地 位 。 港 澳 讯 是 2008 年 4 
i 朋 唐 验 e10 世 元 天 价 从 奏 大 网 络 转 会 新 华 者 后 两 个 月 就 出 手 的 投资 项 图片 吕 上 
ee 目 ， 唐 骏 亲 自 担任 董事 长 职务 。 在 过 去 一 年 多 时 间 星 ， 多 位 互联 网 大 化 
(图 ) 频繁 布局 。 其 中 ， 九 城 CEO 和 朱 台 斥 巨 资 在 杭州 怕 购 名 为 杭州 火 雨 的 游戏 公司 ， 巨 人 CEO 史 玉 柱 的 赢 在 

臣 人 计划 断 医 了 一 款 名 为 《 仙 途 》， 蓝 港 在 线 也 入 股 了 一 家 浙 商 掌控 的 网 游 公司 。 

百度 李 音 室 : 者 来 引擎 


设 门 术 市 场 成 长 空间 大 | 他 日 早 闻 ， 习 讯 与 DST 联 合 宣布 ， 麻 讯 以 约 3 亿美 元 极 资 DST， 栅 资 总 额 将 全 部 以 现金 支付 在 交易 完 
同 大 天 下 历程 : 从 硬 产 “| 本 后 ， 麻 讯 用 持 有 DST 的 10.26%6 的 经 济 权益 。 届 讯 将 寺 有 DST 约 5.5196 的 总 投票 权 ， 并 有 家 提名 一 
边 弱 到 信 信 升 至 1 亿美 元 | 名 DST 曹 事 会 观察 员 。 据 了 解 ，DST 是 俄 罗 基 互联 网 巨 兴 ， 对 Facebook 投 资 已 达 数 亿 疼 元 ， 并 持 有 
本 的 596 的 股份 。 目 前 也 讯 与 DST 及 俄罗斯 传 学 集团 ProfMedia 已 才 与 喜 购 AOL 作 下 ICQ 妈 时 通讯 
昼 。ICQ 有 4200 万 活跃 用 户 ， 有 其 中 俄罗斯 用 户 为 1850 万 ， 占 全 部 用 户 的 4496。 对 此 ， 唐 驶 天 示 ， 从 
有 i 次 投资 的 入 款 来 看 ， 更 类 似 财务 投资， 显然 匿 讯 并 没有 控制 对 方 和 意图。 并且 从 从 DST 入 股 

下 acebook 和 zynga、 刀 括 该 公司 在 俄罗斯 以 及 东欧 的 托 资 来 看 ，3 亿 美元 购 得 1096 左 右 的 经 济 利益 还 
算 相 对 合理 ， 如 果 单 纯 是 为 进入 俄罗斯 市 场 ， 这 种 投资 就 干 是 很 划 揽 了 ， 因 为 碍 对 来 说 俄罗斯 互联 网 
ri 场 的 想 外 空间 有 限 ， 互 联网 行业 价值 30 亿 美元 的 公司 并 不 多 。 一 重 “ 保 险 ”。 


膨 骏 推测 ， 腾 讯 投资 DST 的 目的 有 三 ， 第 一 ， 通过 DST， 腾 讯 可 以 更 多 的 搁 航 国际 互联 网 市 场 ， 万 其 
是 藉 此 间接 进入 俄罗斯 和 东欧 市 场 。 第 二 DST 在 Facebook 和 Zynga、 还 有 一 些 其 他 新 兴 互联 网 领 
城 的 投 次 ， 也 朋 让 腾讯 同 接 参 与 到 这 种 国际 互联 网 公司 的 竞争 中 来 第 三 ， 也 是 最 重要 的 一 点 ， 腾 读 
和 DST 骏 方 部 是 1CQ 的 竞 购 方 ， 腾 讯 此 次 投资 DST， 等 于是 为 成 功 珊 购 1CQ 加 了 


新 华 都 唐 验 : 我 为 自己 打工 不 是 广 陈 发 树 打工 


1 月 25 日 和 28 日 ， 新 华 痢 在 上 海 环球 金融 中 心 大 楼 者 会 厢 召 开 了 两 次 大 型 新 闻 发 布 会 。 首 先是 新 华 者 
控股 的 港澳 资讯 ， 以 价值 2500 万 美元 的 现金 和 股票 ， 收 购 了 4 宥 1T 类 公司 。 这 毕 股票 里 面 ， 有 不 少 是 
项 骏 本 人 直 括 持 有 的 新 华 都 股份 ;您 后 是 新 华 邦 置 布 以 3200 万 美元 ， 取 得 芥 丹 集团 专攻 草 硕 刀 等 小 寒 电 
产品 的 子 公司 奔 肌 电工 19.996 股 份 。 


对 于 唐 驶 和 陈 发 树 来 说 ， 这 两 起 收购 分 别 有 着 特殊 的 意义 。 港澳 资讯 是 2008 年 4 月 唐 驶 以 10 亿 元 天 价 
从 窟 大 网 络 转 会 新 华 都 后 两 个 月 就 出 手 的 投资 项 目 ， 唐 又 亲自 担任 活 澳 资讯 董事 长 ， 这 在 当时 被 业界 
乔 碟 是 唐 驶 答应 来 新 华 都 的 一 个 条 件 之 一 ， 即 拥有 一 个 自己 具备 相当 话语 权 的 平台 和 根据 地 。 


图 18-2 ”新 闻 内 容 页 面 的 效果 图 


人 EN 网 站 文件 综述 


网 站 页 


面 的 文件 部 分 是 比较 传统 的 ， 用 img、css 和 scripts 三 个 目录 保存 网 站 所 


片 、CSS 文 件 和 JS 代码 ， 文 件 及 其 功能 如 表 18-1 所 示 。 


表 18-1 新 闻 网 站 文件 和 目录 一 览 表 


到 的 图 


模块 名 功能 描述 

首页 
页 面 文件 新 闻 内 容 页 面 

健康 专题 页 面 
css 目 录 下 所 有 扩展 名 为 css 的 文件 本 网 站 的 样式 表 文件 
scripts 目 录 下 所 有 扩展 名 为 js 的 文件 本 网 站 的 JavaScript 脚 本 文件 
img 之 下 所 有 的 图 片 本 网 站 需要 用 到 的 图 片 
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QQ、 | 精通 DIV+CSS emit 布局 


里 需要 搭建 一 个 新 闻 网 站 ， 网 站 首页 的 布局 是 比较 重要 的 ， 本 节 将 依次 讲述 如 何 搭建 


8.2 规划 首页 的 布局 


征 玉 有 搭建 首页 页 头 部 分 的 DIV 


新 闻 网 站 的 页 头 部 分 是 比较 重要 的 部 分 ， 它 包括 网 站 Logo、 网 站 的 导航 和 联系 方式 部 
分 ， 页 头 的 效果 如 图 18-3 所 示 。 


站 导航 | 邮箱 


Tame TD re EC 


图 18-3 ”首页 页 头 设计 分 析 图 


新 闻 网 站 页 头 中 的 导航 比较 多 ， 关 键 代 码 如 下 所 示 。 


1. <div idq="header"> 

2 <div id="l0go"> <a id="home" href="#"><span> 科 技 新 闻 首页 </span></a> 

35 <div id="utility" ><span>2010 年 05 月 10 日 </span> <a href="#"> 登 录 </ 
a> <span>|</span> <a href="#" > 注册 </a> <span>|</span> <a href="#"> 网 站 导 
航 </a> <span>1</span> <a href="#"> 邮 箱 </a> 

4. <div id="searchbox" > 

本 <a href="#" > 搜索 :</a>&nbsp; 

6. <input id="search-text" type="text" alt="Search Public Health at 

Harvard" name="qg" value="" /> 
3 <input id="gobutton" type="image" src="img/go.gif" name="sa" value=" 
搜索 " /> 

8. </div> 

9 </div> 

1 局 </div> 

ey 

12. <dqiv idq="navbar"> 

Ee <ul id="nav"> 

TO <1i><a href="index.html"> 首 页 </a> 

15= <ul> 

Le <1i><a href="news .html"> 国 际 新 闻 </a></1i> 

7 

9。 </ul> 

9 </1i> 

之 0 <1i><ahref="newswen .html"> 科 技 专题 </a> 

1 <ul> 

2 <1Li><a href="#"> 互 联网 </a></1i> 


348 


第 18 章 “新闻 网 站 


Te 
24 </ul> 

25. 人 

26E <1i><ahref="newszhuan.html"> 数 码 专题 </a> 
和 <ul> 

28. <1i><a href="#"> 手 机 </a></1i> 

29 

30 </ul> 

3 > 

SE es 

人 33 <1i><a href="#"> 科 学 新 知 </a></1i> 

3 <1i><a href="#"> 奇 趣 科学 </a></1i> 

355 </ul> 

36. </div> 


在 上 面 代码 中 ， 导 航 部 分 由 ultli 嵌 套 组 合 而 成 ， 因 为 导航 较 多 ， 所 以 在 代码 中 只 给 出 了 
前 面 两 个 有 子 分 类 的 导航 和 后 面 两 个 没有 子 分 类 的 导航 。 
其 中 ， 第 2 行 是 网 站 Logo， 第 3 行 是 网 站 的 上 导航 部 分 ， 第 4 到 第 8 行 是 站 内 搜索 部 分 ， 第 
12 到 第 36 行 是 网 站 的 下 导航 部 分 。 这 里 比较 重要 的 就 是 下 导航 部 分 ， 它 使 用 ut 有 序列 表 搭 
建 而 成 。 


E 光 有 搭建 “深度 新 闻 ” 部 分 的 DIV 
深度 新 闻 部 分 是 正文 部 分 的 第 一 个 部 分 ， 效 果 如 图 18-4 所 示 。 


Facebook 与 zynga 亲 


[省 景 利 时 代 终结 
下 主 1E 的 没落 


ThinkPad 变 色 记 
仿 党 软 居 候 的 10 大 产品 
新 型 云 计算 之 门 开局 


图 18-4 深度 新 闻 部 分 的 DIV 效果 图 


深度 新 闻 部 分 的 关键 代码 如 下 所 示 。 


1. <div class="content"> 

2 <h3 class="first"> 深 度 新 闻 </h3> 

全 <div class="text"> 

4 <img class="noborder" Src="img/home492010 students.jpg" 
style="width:140px;" /> 

Si <h4>Facebook 与 Zynga 闹 </h4> 

6. <ul> 
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| 村 DV+CSS mmsnn 加 请 请 请 六 计 计生 


了 <1i><atitle="prospective students" href="#"> 网 游 暴利 时 代 终结 </a> </1i> 
8. <1i><atitle="student 1ife" href="#"> 霸 主 IE 的 没落 </a></1i> 
9-。 </ul> 

To <h4>ThinkPad 变 色 记 </h4> 

ia <ul> 

2 <1i><a href="#"> 令 微软 月 惧 的 10 大 产品 </a> </1i> 

3 <1i><a href="#"> 新 型 云 计算 之 门 开启 <br /> 

14. </a></1i> 

5 </ul> 

16. </div> 

17- </div> 


从 上 面 代码 可 以 看 出 ， 深 度 新 闻 部 分 可 以 分 为 三 个 部 分 ， 分 别 为 一 个 图 片 部 分 和 两 个 文 
字 部 分 。 其 中 ， 第 4 行 是 图 片 部 分 ， 第 6 行 到 第 9 行 是 第 一 个 文字 标题 部 分 ， 第 10 行 到 第 15 行 
是 第 二 个 文字 标题 部 分 ， 


搭建 “会 议 活动 ”部 分 的 DIV 


会 议 活 动 部 分 是 正文 部 分 第 一 列 的 第 二 部 分 ， 这 部 分 展示 的 是 当前 业界 比较 重大 的 新 
闻 ， 效 果 如 图 18-5 所 示 。 


会 议 " 活动 
DS IC 


DST 斥 资 1.87 亿 美元 收购 
ICQ 


18-5 会 议 活动 部 分 DIV 的 效果 图 


会 议 活动 部 分 的 代码 如 下 所 示 。 


<div class="content"> 

<h3 > 会 议 * 活 动 </h3> 

<div class="text"> 
<h4><a href="#">DST 收 购 IcQ </a></h4> 
<p>DST 斥 资 1 .87 亿 美元 收购 ICQ </p> 
<h4><a href="#"> 腾 讯 投 资 俄罗斯 公司 </a></h4> 
<p> 腾 讯 3 亿 美元 投资 俄罗斯 DST 公 司 </p> 

</div> 

</div> 


从 上 面 代码 可 以 看 出 ， 虽 然 这 部 分 显示 的 样式 与 深度 新 闻 部 分 类 似 ， 但 是 它 主要 由 基本 
的 <p> 标 签 和 标题 标签 组 合 而 成 的 。 
会 议 活动 部 分 与 深度 新 闻 部 分 的 样式 、 代 码 搭建 方式 很 相似 ， 所 以 这 里 就 不 做 说 明了 。 


oowamoaw 必 wmN 
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搭建 “大 图 新 闻 ” 部 分 的 DIV 


大 图 新 闻 部 分 是 正文 部 分 第 二 列 的 第 一 部 分 ， 这 部 分 如 图 18-6 所 示 。 


淘宝 和 雅虎 日 本 6 月 上 


互相 推广 上 架 商 


图 18-6 ”大 图 新 闻 部 分 的 效果 


大 图 新 闻 部 分 的 关键 代码 如 下 所 示 。 


1. <ul id="photos"> 

2 <1i class="current"> 

| <ahref="#"> 

4. <img src="img/banner/air pollution smoke stacks.home page.jpg" /> 
5. <span class="subtitle"> 支 付 清算 组 织 管理 办 法 </span> 

6 <span class="title"> 最 快 下 月 出 台 : 传 改变 天 翻 地 覆 </ span> 

</a> </1i> 

8 wo 

加 </ul> 

Di </div> 


这 部 分 的 代码 都 是 由 ul+li 有 序列 表 组 合 而 成 ， 这 里 只 给 一 条 大 图 新 闻 的 代码 ， 其 余 代码 
搭建 方式 是 一 样 的 ， 这 里 就 不 重复 说 明了 。 

这 部 分 实现 了 一 个 单 击 新 闻 标 题 ， 显 示 相 对 应 的 新 闻 图 片 的 动态 效果 ， 这 个 效果 由 JS 实 
现 ， 这 里 就 不 再 详细 的 说 明了 。 


搭建 “新 闻 报 道 ” 部 分 的 DIV 


在 新 闻 报道 部 分 ， 其 外 框 部 分 和 第 18.2.3 小 节 介 绍 的 是 一 样 的 ， 在 框 的 内 部 包含 了 几 个 
不 同 的 文字 描述 ， 这 部 分 的 效果 如 图 18-7 所 示 。 


上 北京 电信 首次 补贴 社会 渠道 购 机 ， 晤 高 赠 话费 3600 元 北京 电信 首次 补贴 社 
会 渠道 购 机 :最 高 暗 话费 3600 元 ( 共 语 电信 首 记 太 肤 会 烧 这 网 委 :家 熙 
入 过 瞄 3600 同 


讯 投 次 全 罗斯 人 司 py re 
二 二 国家 开发 网 络 身份 验证 答 统 ” 竹 副 译 误 读 (“ 国 训 下 攻 厅 竺 导 盼 关 让 页 


EE da) 


图 18-7 新 闻 报道 DIV 效 果 


加 
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人 | 有 DIV+CSS mmexsa Le 


新 闻 报 道 部 分 中 的 每 一 个 项 元 素 都 包含 在 段落 标签 内 ， 代 码 如 下 所 示 。 


1. <divid="homeleft"> 

2 <h2> 新 闻 报 道 </h2> 

EE 全 <div class="content"> 

4 <p><strong> 

3 <img src="img/review 5.10 little girl 60x60.jpg" style="float: 
left;" /> 

K </strong> 

ee <ahref="#"> 

8. 北京 电信 首次 补贴 社会 渠道 购 机 : 最 高 赠 话费 3600 元 , 北京 电信 首次 补贴 社会 渠道 购 
机 : 最 高 赠 话费 3600 元 

有 </a> (<em> 北 京 电信 首次 补贴 社会 渠道 购 机 : 最 高 赠 话费 3600 元 </em>) 

Ds </p> 

as <p><a href="#" target=" blank"> 

全 2 <img src="img/drought .60x60.jpg" style="float: left;" /> 

3 "国家 开发 网 络 身份 验证 系统 " 系 翻译 误 读 </a> (<em>" 国 家 开发 网 络 身份 验证 系统 " 

系 翻译 误 读 </em>) 

14. </p> 

1 <!---//// 其 他 项 元 素 代码 略 -------- > 

Ge </div> 

Ee </div> 


搭建 “名 人 博客 ”部 分 的 DIV 
名 人 博客 部 分 主要 显示 相关 博客 的 列表 信息 ， 效 果 如 图 18-8 所 示 。 


二 90 元 .北京 电信 首次 补 网 社 | 地 方 网 站 营销 : 提升 广告 ROI 五 个 途径 
12:30 
“国家 环 民 同 答 身份 凑 证 ， ee 
2010-05-09 
3:30 
i 
) 迟 点 
9 
世博 专题 
图 18-8 ”名 人 博客 部 分 的 DIV 
下 面 给 出 名 人 博客 部 分 的 关键 代码 。 
1. <div id="homeright"> 
2. ”<h2> 名 人 博客 </h2> 
<div class="content "> 
4. <ul> 
5 <1i> <a href="#"> 地 方 网 站 营销 : 提升 广告 ROI 五 个 途径 </a><br /> 
[3 2010-05-10<br />12:30 
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14. 


在 上 
里 不 给 出 


/i> 
<1i><a href="#"> 建 议 运 营 商 给 普通 用 户 简 单 收费 模式 </a><br /> 
2010-05-09<br />3:30 
让 世上。 
</ul> 
<p><a href="#"><strong> 更 多 博客 </strong></a></p> 
</div> 
</div> 


而 代码 中 ， 通 过 把 a 标签 的 display 设 置 成 block， 然 后 设置 i 标签 的 list-style 即 可 ， 这 
样式 代码 ， 请 查看 光盘 中 相应 的 案例 代码 。 


搭建 页 脚 部 分 的 DIV 


页 脚 


页 脚 


部 分 包含 了 链接 导航 和 友情 链接 图 标 两 部 分 ， 效 果 如 图 18-9 所 示 。 


wpm ny 


内 证 新 地 社会 人 分 享 和 国语 


Wo 


左 原 在 们 | 基于 让 们 | 小 和 条 次 | 合 丰 名 济 | 网 由 地 四 同 T m 


名 全 关 加 网 自 2010 保 入 一 切 权利 


图 18-9 页 脚 部 分 的 DIV 


部 分 关键 的 实现 代码 如 下 所 示 ， 这 部 分 的 代码 比较 简单 ， 所 以 就 不 再 分 析 了 。 


<div id="footer"> 
<div id="social-media"> 
<a class="first" href="#" > 
<img src="img/template/twitter.gif" /> 
</a> 


<img src="img/template/facebook.gif" /> 
</a> 
<ahref="#"> 
<img src="img/template/youtube.gif" /> 
</a> 
<ahref="#"> 
<img src="img/template/linkedin.gif" /> 
</a> 
</div> 
<p id="bottomlinks"> 
<a href="#"> 联 系 我 们 </a> <span>1</span> 
#" > 关于 我 们 </a> <span>1</span> 
#"> 法 律 条 款 </a> <span>1</span> 
="#"> 合 作 渠 道 </a> <span>1</span> 
<a href="#"> 网 站 地 图 </a> 
</p> 
<p id="copyright"> 
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人 | 情 本 DiV+CSS mmrxsna [Ge 


24. 综合 新 闻 网 ccopy; 2010 保留 一 切 权利 


255 </p> 
26. </div> 
27. </div> 


下 于 天 站 首页 CSS 效 果 分 析 
在 前 面 描述 DIV 的 时 候 ， 我 们 已 经 讲述 了 部 分 CSS 的 代码 ， 
首页 中 其 他 CSS 的 效果 ， 如 表 18-2 所 示 。 
表 18-2 首页 DIV 和 CSS 对 应 关系 一 览 表 
CSS 描 述 和 关键 代码 


本 小 节 将 用 表格 的 形式 描述 


定义 Logo 为 背景 图 ， 并 且 高 度 与 页 头 
DIV 相 同 
#logo { 


background-image:url(../../img/ 
hsph_logo.gif); 
<div id="logo"> ph_logo.eif) 
background-repeat:no-repeat: 
background-position:left: 
margin-left:.Sem; 


height:100% 


定义 这 个 区 域 中 
.subtitle { 


font-size:1.2em:; 


字体 的 粗细 


<span class="subtitle"> 
text-transform:uppercase; 


font-weight:700 


定义 搜索 栏 的 样式 

#search-text { 
background-color:#E7E7E7; 
border:0; 

<input id="search-text" display:inline; 

font-size:1.4em: 

width:13.9em: 

padding:.143em 0 


淘宝 和 雅虎 日 本 6 月 上 


上 四 商 | 


字体 以 相当 于 粗 
体 的 效果 
《 弄 财 间 报 》 全 全 全 全 全 全 
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18.3 ”新 闻 内 容 页 面 


新 闻 内 容 页 面 主要 包括 了 新 闻 分 类 列表 和 新 闻 文 章 介 绍 两 部 分 ， 我 们 使 用 不 同 的 DIV 块 


ERKEB 分 类 列表 部 分 的 DIV 
分 类 列表 部 分 使 用 ul 和 上 i 标签 ， 内 部 使 用 错 点 元 素 进行 链接 ， 效 果 如 图 18-10 所 示 。 


首页 > 科技 专题 > 正文 


美国 人 知晓 Twitter 比 便 
1 年 内 从 26% 增 至 87% 


新 华 同和 东方 同 等 10 新 闻 
网 站 成 首 批 A 股 上 市 对 象 


苹果 注册 iTunes Live 商 
标 提供 实时 娱乐 服务 


美 团 同 开通 上 海 站 壬 兴 
执 1 年 扩张 至 20 座 城市 
据 刊 玫 撩 格 出 侣 方案 : 


图 18-10 新闻 分 类 列表 效果 图 
上 图 所 示 的 列表 区 域 包含 在 名 为 menuitem 的 容器 内 部 ， 使 用 h3 显 示 标 题 ， 代 码 如 下 所 


1 卫 <div class="menuitem"> 

2 <h3> 文 章 导航 </h3> 

区 入 <ul> 

4. <Li> 

Ds <a href="#"> 掌 上 百度 推出 Android 版 宣称 下 载 量 已 过 千 万 </a> 
6. </1i> 

了 <1i> 

8. <ahref="#"> 

9 美国 人 知晓 Twitter 比 例 1 年 内 从 26% 增 至 87% 
IOs </a> 

和 </1i> 

2 <!----// 其 他 项 代码 略 ----> 

3 </ul> 


于 4 7GTY>>> 


这 里 的 列表 项 设计 简单 明了 ， 在 之 前 的 案例 中 已 多 次 介绍 过 ， 相 应 的 样式 代码 如 下 所 


示 。 


人 EDV+CSSmmrnsnn 


下 #leftcol h3 { 

区 Color:#f5f5f5; 

3 font-size:100%; 

4. margin:001px0; 

< 时 padding:5px7 

6 background:#0c425a url(../../img/sitenavtop.gif) no-repeat top center; 
Tp 

8. #1leftcol ul, #leftcol li { 

9= list-style-type:none; 

05 padding:0; 


3 margin:002px0; 

2 background-color: #E7E7E7; 
3 line-height:110%; 

a 


15.#leftcol ula { 
16. /* 列 表 项 1i 内 的 锚 点 a 必须 设置 为 块 状 显 示 */ 


Ws display:block; 

ED margin:0; 

19. padding:5px; 

ZO font-size:90%; 

之 text-decoration:none; 
2 width:140px; 

2 

24.#leftcol ul a:hover { 

Ds background-color: #595959; 
26. Color:#E7E7E7; 

2 font-weight: bold; 

28.. text-decoration:none; 
2 国 时 | 

30.#leftcol ul a.current { 

3 Color: #E7E7E7; 

2 font-weight: bold; 

SS background-color: #595959; 
Sa 

35. #leftcol ul a.current:hover { 
362 Color: #E7E7E7; 

人 37a 


从 上 面 代码 可 以 看 到 ， 列 表 项 内 的 锚 点 标签 使 用 块 状 显示 ， 这 样 可 以 自动 充满 DIV 区 
域 ， 并 且 使 用 伪 类 hover 实 现 高 亮 显示 。 


新 闻 文 章 部 分 的 DIV 


新 闻 内 容 页 面 右 边 部 分 是 新 闻 文章 部 分 ， 它 包含 三 个 部 分 : 新 闻 标 题 、 新 闻 导读 和 新 闻 
主体 部 分 ， 如 图 18-11 所 示 。 
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第 18 章 ”新闻 网 站 


都 总 裁 唐骏 重 返 网 游 业 初期 投资 上 亿 元 


导 喜 ] 唐 又 今日 对 尽 讯 科技 表示 。 自 己 将 重 返 网 洲 行 业 ， 并 对 网 洲 国 队 全 面 投资 。 其 个 人 和 新 
从 者 旗下 公司 港澳 资讯 如 在 一 起 ， 早 期 的 投资 规模 将 达到 一 亿 元 。 


新 华 都 集团 CEO 莱 总 裁 唐 验 今日 向 腾讯 科技 证 详 ， 自己 
， 对 网 游 团队 的 投资 规 乾 初期 将 达到 一 亿 元 。 据 了 解 ， 


司 东 方 网 等 革 J， 唐 怠 近期 秘 认 圭 府 了 杭州 等 地 的 网 游 市 场 ， 有 思 以 个 人 

准 重 新 投资 网 游 。 有 知情 人 士 适 落 ， 在 过 去 一 个 月 中 ， 庆 驻 几乎 成 了 
下 飞人， 在 北京 、 青 岛 、 上 泽 、 杭 州 等 地 末 回 痉 波 ， 其 至 还 跑 了 一 艳 
供 实时 关东 蛛 务 | 断 加 过 。 除 了 人 于 公司 的 常规 业务 ， 加 末 重 返 聊 游 市 场 是 他 比较 上 心 的 


腔 题 。 对 此 ， 唐 骏 今 日 对 腾讯 科技 表示 ， 自 己 冰 重 返 网 游行 业 ， 并 对 网 
畔 团队 全 面 报 资 。 其 个 人 和 新 全 都 旗下 公司 港澳 资讯 加 在 一 起 ， 早 期 的 
据 秋 ， 唐 骏 于 2008 年 4 月 加 入 新 华 都 ， 在 那 之 


寻 开通 上 海 站 壬 关 
堵 张 至 20 座 城市 


于 相册 和 太守 和。 | 防 他 是 伍 大 总 态 ， 在 网游 因 拥有 较 高 的 江湖 地 位 。 港 省 光 讯 是 2008 年 4 
以 10 亿 元 天 价 从 万 大 网 络 转 会 新 华 都 后 两 个 月 就 出 手 的 投资 项 [Lid 
ey 唐 验 亲 记 担任 董 带 长 隘 务 。 在 过 去 一 年 多 时 间 里 ， 多 位 互联 网 大 化 
莹 布局。 有 其 中 ， 九 城 CEO 朱 骏 斥 巨 资 在 杭州 收购 名 为 杭州 火 雨 的 游戏 公司 ， 巨 人 CED 史 玉 柱 的 赢 在 
态 人 计划 i 获 了 一 款 名 为 《 仙 途 》， 蓝 港 在 线 也 入 股 了 一 容 断 商 拿 控 的 网 游 公司 。 
上 总 室 : 搜索 引擎 


生 市 场 成 长 空间 大 反 


| 


图 18-11 新 闻 文章 效果 


实现 新 闻 文章 部 分 的 代码 如 下 所 示 。 


本 
2 
3 
4. 
SD 
6 
这 
8 
3 


2 
区 
23 
24 


上 


E31 


1. 
全 
3- 


<div id="maincol" class="clearfix"> 


<div id="siteimg"> 
</div> 
<h2> 
新 华 都 总 裁 唐骏 重 返 网 游 业 初期 投资 上 亿 元 
</h2> 
<div class="content"> 
<p> 
<strong> 
[导读 ] 唐骏 今日 对 腾讯 科技 表示 ， 自 己 将 重 返 网 游行 业 ， 并 对 网 游 团 队 全 面 投资 。 其 个 
人 和 新 华 都 旗下 公司 港澳 资讯 加 在 一 起 ， 早 期 的 投资 规模 将 达到 一 亿 元 。<br /> 
</strong> 
< 
<div class="mceTmp1"> 
<div class="floatRight-sm"><img src="img/madina-agenor2.jpg" 
alt="madina agenor 2" title="madina agenor 2" /><br /> 
<p class="ImageTitle"> 
图 片 照片 
</p> 
</div> 
</div> 
<p>5 月 10 日 消息 ， 新 华 都 集团 CEO 兼 总 裁 唐骏 今日 向 腾讯 科技 证 实 ， 自 己 将 重 返 网 游行 
业 ， 对 网 游 团 队 的 投资 规模 初期 将 达到 一 亿 元 。 


</p> 
</div> 


</div>> 


代码 使 用 DIV 进行 自 上 而 下 的 布局 ， 下 面 列 出 关键 的 样式 代码 。 


#maincol h2 { 


} 


padding:2px 0 5px 0; 
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人 GEDIV+CSSmmrnsna Re【 


4. -Content PT 

5. margin:0010px0; 

Se 

7. .clearfix{ 

8. ”/* 设 置 同 一 行内 块 状 显 示 */ 
9. display: inline-block; 


E05 

11. .content, .summarizedcontent { 

2 margin:0; 

3 padding:10px 5px 10px 0; 

14. clear:both; 

Se 

16.*html .content { 

Es width:95%; 

下 人 天下 

19.p.ImageTitle { 

20. font-size:80%; 

2 font-weight:bold; /* 粗 体 */ 
22 line-height:100%; ”/* 行 高 100%*/ 
2 padding:5px 000;  ”/* 顶 空白 区 域 */ 
ZE margin:0; 

2 text-align:left; 

C4 

27. .floatright-sm{ 

2 float:right; 

2 margin:5px 0 5px 5px 

S30 


31. /xx// 其 他 样式 略 **/ 
在 上 面 代 码 中 ， 我 们 列 出 了 部 分 样式 ， 样 式 定义 比较 清晰 ， 这 里 不 做 详细 说 明了 。 
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